Week 1: Making a web map, Apple vs Google Maps

Experimental Geography: From Cultural Production to the Production of Space

The idea of geography in my childhood was about the geographical location of different countries and how the earth was being made. In my past memories, the geography seems to acknowledge the nature’s space and how it is affecting human activity. The web map now, according to Paglen in his article Experimental Geography: From Cultural Production to the Production of Space, becomes “the production of space is…the human condition is characterized by the feedback loop between human activity and our material surroundings…space is actively “produced” through human activity”. I cannot agree more of what Paglen said, which I think the web maps nowadays are investigating the human activity and underlying connections, and we are also using what we have understood from geography to turn it into a tool for human activities, like Google Map for driving directions and finding places. This reading has deepened my understanding of geography, knowing that the content of Geography has even expanded to social living context and politics based on creating spaces or boundaries and analyzing the relationship between human activity with culture.


What I read through the CARTOGRAPHY COMPARISON Google Maps & Apple Maps, I could spot out some differences just based on my visual observation on both Google maps and Apple maps. Personally speaking, Google maps’ are less aesthetically than Apple maps, which means its functionality is the main focus, also by expanding them into open sources of other apps in route directions and touring, making it easier and convenient for users to know how to go to places. In Apple Maps, there are popups of representational buildings like Central Park and Empire state building, and this gives an overview where the location is at. Even though Apple Maps are more pleasing to look at, it is not hard to notice that functionality fall off a bit with oversimplified icons and visuals.

Anatomy of a Web Map

I really love the simplicity and learning right away about the web map by reading the Anatomy of a Web Map ! The history of web map and its different styles of functionality throughout the years are amazing, and it was fun to compare them. In the slideshow, the developers also provided very useful links to make a web map and its structure (I really did take good notes on it)! Although some of the links are broken, the options they provided still makes it interesting for me to explore varieties of maps.


After having a better understanding of web map, I started with the quick start guide of leaflet.js to rebuild the web map, and I have learned to understand how I could set the view of the map with the location coordinates and the zooming level, and creating pop-ups and shapes on the map. The function script allows me to understand the coordinates’ data much clearer when I clicked on the map. In the process, I have also created a Mapbox account for the access token of API.

After setting up a web map, I played a little by customizing the map style through the Mapbox and picked the “mapbox.dark” style. There are many styles to choose from Mapbox and it is also possible to customize it with our own CSS styles.

I have also played with Cartogram with Mapbox, and it is using the photo that we upload to analyze the RGB colors and style the map, which is a very interactive way to create your own color style.

After customizing the style of my web map, I also went on creating a circle shape in the map view of Hong Kong, which represents my parent’s birthplace, as we were talking about our home on a map on the first lesson. More than that, I outlined a heart shape using the coordinates I clicked on the map and that is my favorite place to go in Hong Kong.


Github: https://github.com/ellacyt/ImpossibleMaps/tree/master/Week1 

Link: https://ellacyt.github.io/Week1/index.html 

Structure of web map

Example: https://tile.openstreetmap.org/{z}/{x}/{y}.png

{z} = Zoom in level , {x} / {y} = place in the grid where the tile lives.


How web map is being combined


Reference links: 

Anatomy of a Web Map 

Javascript  LeafletOpenLayers / Modest Maps / Polymaps

API: Google Maps API / Bing Maps API / Nokia HERE Maps API / ESRI ArcGIS API

Using premade tiles : OpenStreetMap / Stamen  / MapQuest  / MapBox 

Customizing tiles on our own : Tilemill 

Styling map : Carto / CartoCSS

Own tile server: TileServer.php / TileStache / TileCache / TileStream / mbtiles-server / mod_tile

Making Content layer:

  1. UTFGrid
  2. Convert a Shapefile to GeoJSON with OGRE (making your own)
  3. Write your own GeoJSON with geojson.io (making your own)

Location intelligence CartoDB

Learning Web Map Maptime.io

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top