With Halloween just around the corner, have some fun with a mapping side project using the TomTom Maps SDK for Web. Turn a boring map into a spooky customized one, with eerie colors and fun map markers.
Maps are great. With the proliferation of location-aware devices, apps that use location in some way have become an essential part of our lives.
There is one catch, however. Most mapping apps use default map styling, which may or may not be easy to read. As you can see from the map below, this usually isnât a bad thing. The default style of TomTomâs maps (shown below) is pretty standard:
But just wait 'til you get your hands on the TomTom Maps SDK (now in v6 public preview), which supports some amazing customization features. One new feature, TomTomâs updated map customization tool, lets you customize your map visually â and you donât need to be an expert coder to make some cool changes.
So, you can create truly unique maps with the Map Styler.
What better way to explore these features than with a fun (and seasonally appropriate) Halloween map? Letâs see how you can use the customizer to maximize your mapâs spooky factor.
Getting Started: Create a Vector Map đș
Letâs get started by creating a simple vector map. Rather than reinventing the wheel, you can follow the directions in the âDisplay a Vector Map Tutorialâ to create a map.
Apply Custom Colors đš
Now that you have a map, letâs jump over to the Map Styler tool. In keeping with the spirit of Halloween, Iâve decided to make my mapâs landmasses black, the bodies of water blood red, and the roads pumpkin orange. These are just suggestions. Feel free to come up with your own fun and frightening (or festive) color combination!
Next, weâll learn how to apply the custom colors to our map. Fortunately, itâs effortless. When you load the map customizer, youâll see a map of the world. I recommend zooming in because the colors of map layers can vary depending on the mapâs zoom level. Since weâre creating a Halloween map of an urban area, Iâm going to zoom in on a city before starting to make changes.
To create our Halloween map, weâll do two things: first, weâll change the color of buildings to pumpkin orange. Then weâll make rivers, lakes, and oceans blood-red instead of blue.
To edit a map feature, click on it. When you do, youâll see a small pop-up telling you which layers are present at that location. If you click on the water near downtown San Francisco, for example, youâll see the following:
In terms of maps, water isnât complicated, so thereâs only one layer present. Click on âOcean or sea,â to see a properties panel containing editable properties for the ocean map layer. Scroll down to the Paint Properties header where youâll find the colors you can edit:
Wait a minute â why are there two different ocean colors? The ocean doesnât look multi-colored on the map! The two numbers to the left of the color â in this case, 0 and 6 â represent the map zoom level at or above which the color is applied. So here, the ocean appears in a slightly different color depending on the mapâs zoom level. Since we always want our Halloween ocean to be blood red, letâs delete one of the stops and set the remaining one to a nice, deep red hue:
Spooky! Now, letâs click on a built-up area so we can make all built-up areas black:
San Francisco is looking more ominous than it did a moment ago, but thereâs still some green showing up to the north of the Golden Gate Bridge. If you click on it, youâll see itâs a national park â part of the Golden Gate National Recreation Area. National and state parks, as well as other similar areas fall under their own color schema, so that users can still easily identify them. Here, weâre going to change it from park to dark to match our Halloween theme:
Now weâre getting somewhere! We have a customized map style. Letâs export that style from the customizer, then apply it to a map. To export it, click on âexportâ at the top left of the customizer window. When you do this, you will see your browser download a JSON file that we will use in a moment.
Hide Place Names by Changing the Opacity
Finally, to make the map simpler (and spookier), you can hide place names, small roads, and ferry routes by setting their opacity to 0:
As you can see, the customization tool makes it easy to edit any visual property of your map.
Add Your Customized Map Style to the Original Map
Now that we have a customized map style, letâs add it to the map we created earlier. To add the style, weâll make a small modification to our mapâs initialization code:
var map = tt.map({
key: "<Your API Key Goes Here>",
container: "map", //style: 'tomtom://vector/1/basic-main',
style: "http://localhost:8080/main.json",
center: [-122.419948, 37.779241],
zoom: 11.5
});
Now our map uses the Halloween style we created in the customizer! (Note that Iâve added the style main.json to the root directory, and Iâm loading it from the root directory thatâs being served up by Nodeâs http-server. If you put the style in a different location, or you are using a different method of serving your HTML and JavaScript, your mapâs style property may look different.)
If we load our map in a browser, weâll see this:
As you can see, the custom map style is working as expected.
Changing Map Markers: Pumpkin Time! đ
So far, so good. We have a spooky-looking Halloween map, but itâs not very exciting. As impressive as our map looks, when I think of Halloween, I think of pumpkins â and theyâll be added to the map next.
Fortunately, TomTom makes it easy to add custom markers to a map. Typically, a marker looks like this:
Weâll give our map more Halloween spirit using some public domain pumpkin vector art available here.
Assuming you followed the instructions in the map tutorial, youâre creating your map inside a script tag. After the pumpkin modifications, your script tag should look like this:
tt.setProductInfo("Halloween Map", "1.0");
var map = tt.map({
key: "<Your API Key Goes Here>",
container: "map",
style: "http://localhost:8080/main.json",
center: [-122.419948, 37.779241],
zoom: 11.5
});
function getRandomCoordinate(min, max) {
return Math.random() * (max - min) + min;
}
for(var p = 0; p < 20; p++) {
var northWest = map.getBounds().getNorthWest();
var southEast = map.getBounds().getSouthEast();
var minLng = Math.min(northWest.lng, southEast.lng);
var maxLng = Math.max(northWest.lng, southEast.lng);
var minLat = Math.min(northWest.lat, southEast.lat);
var maxLat = Math.max(northWest.lat, southEast.lat);
var markerLng = getRandomCoordinate(minLng, maxLng);
var markerLat = getRandomCoordinate(minLat, maxLat);
var el = document.createElement("div");
el.style.backgroundImage ="url(http://localhost:8080/pumpkin.svg)";
el.style.width = "25px";
el.style.height = "25px";
el.style.backgroundRepeat = "no-repeat";
el.addEventListener("click", function(e) {
window.alert(`I'm a pumpkin at coordinates ${markerLng},${markerLat}!`);
});
// add marker to map
new tt.Marker(el)
.setLngLat([markerLng, markerLat])
.addTo(map);
}
Letâs take a quick look at whatâs happening.
First, we define a function named getRandomCoordinate that, as its name implies, generates a random map coordinate that falls between the minimum and maximum values passed into the function. Weâll need this so we can draw pumpkins at random locations across our map.
Next, we have a loop that adds 20 pumpkins to our map. To start, we ask the map for its northwest and southeast boundaries and then determine the minimum and maximum latitudes and longitudes.
Knowing these values helps us ensure we draw all of our pumpkins inside the visible portion of the map.
Once we know the mapâs boundaries, we call getRandomCoordinate twice to generate coordinates for our pumpkin.
After that, we use the DOM API to create a new element for our custom pumpkin marker. We wonât do anything fancy here â just create a div element, set its width and height, and set its background image to use our pumpkin SVG. We also add a click handler that causes each pumpkin to announce its location.
Finally, weâll add our custom marker to the map. We accomplish this using the same tt.Marker constructor we would use to create a regular marker â except in this case, we pass our custom element as an argument to the constructor. Thatâs all it takes to add a custom marker to a TomTom map!
Thatâs one spooky map!
Trick or Treat! đ»đđŹ
With very little custom code, weâve been able to create a custom Halloween map! And while having fun along the way, we also learned how the use the Map Styler and add custom markers to our map.
These features are useful far beyond Halloween maps. Map customization can add serious business value to mapping applications, and TomTomâs tools make customization simple.
And weâre just getting started!
You could add more fun features to your maps, like cats that meow when clicked, and ghosts that move. Since the new release of the TomTom JavaScript Maps SDK for Web is based on WebGL, you can add WebGL and canvas effects to spice up your map even further.
What spooky features can you come up with for your Halloween map? Create something fun, then share it with us on Twitter!
Check out the TomTom Developer Portal for more fun tutorials on all things mapping.
This article originally appeared on https://developer.tomtom.com/blog. The original author is Ryan Peden.
Top comments (0)