![](\"https:\/\/mindfusion.dev\/samples\/javascript\/mapping\/fifa_map.png\" "\\"FIFA")
<\/a><\/p>\nThe map has several layers and markers in the cities that hosted the football world cup tournament. Optionally, users can show info labels that describe the tournament year and the winner. In order to use MindFusion mapping library for JavaScript, we need to reference its script files. We need the following files:<\/p>\n We add them at the end of our web page, right before the closing BODY tag. We also need to add a DIV element that represents the map: the mapping library will use it to render itself into it. It is important that we give the DIV element an id:<\/p>\n II. Creating the Map<\/strong><\/p>\n We create the map by using the DIV element we’ve initialzed in the web page. The map is represented by a MapView<\/a> object. The decorations and different maps are layers to the MapView<\/a> .The map loads images as tiles provided by a TMS (tile map service) server. We use for the sample Stamen maps<\/a>, but you can use any other.<\/p>\n The MapView control supports themes, which mostly differ in the color of the zoom control and the location themes. In order to use a theme, you need to set the theme<\/a> property of the class to the name of the theme:<\/p>\n The library includes a list of predefined themes, which you need to reference as CSS files first. You can use them as a base to create your own themes.<\/p>\n II. Location Pins<\/strong><\/p>\n The layer with map pins that mark the locations of world cup tournaments is an instance of the DecorationLayer<\/a> class. We create Marker<\/a> objects and add it to the decorations<\/a> list of the layer. The locations are LatLong<\/a> instances, that specify the latitude and longitude of each location. We keep them in JavaScript object, together with the city name, the year and who the winner was:<\/p>\n We create the markers in a foreach loop:<\/p>\n We also make the later visible and add it to the layers<\/a> collection of the MapView<\/a><\/p>\n When you create any type of layer, you can specify its label in the constructor. The label appears as a map legend. Here is how the map looks with the pins: We use the array with data to take the right info for each bubble. Be default this layer is also not visible but users can show it from the map legend.<\/p>\n And that was the last feature we had to add to our web application. You can download the sample together with all libraries used from the following link:<\/p>\n FIFA World Championship Map<\/a><\/p>\n Technical support is available on MindFusion forums<\/a> at the Help Desk<\/a> or per email support@mindfusion.dev.<\/p>\n About Mapping for JavaScript:<\/i> The library enables any type of web application to render an interactive map through its preferred Tiled Map Service. A special property allows the developer to credit the map service, if necessary. The library boasts a layer and a zoom control. Multiple layers are supported, which can hold pins, decorations or info bubbles. The labels support HTML formatted text. The various events allow you to respond to user actions in a way that’s most suitable to your application. Learn more about Mapping for JavaScript at https:\/\/mindfusion.dev\/javascript-map.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" In this article we are looking at the steps you need to make to build this beautiful, interactive map: The map has several layers and markers in the cities that hosted the football world cup tournament. Optionally, users can show … Continue reading
\n
\nI. General Setup<\/strong><\/p>\n<script src=\"Scripts\/drawing.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/controls.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/common.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/common-collections.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/mapping.js\" type=\"text\/javascript\"><\/script>\n<\/pre>\n
<div id=\"content\" style=\"top: 5px; bottom: 24px;\">\n\t<div style=\"position: absolute; width: 100%; height: 100%;\">\n\t\t<div id=\"mapView\" style=\"height: 100%; width: 100%;\">\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/pre>\n
var view = new m.MapView(document.getElementById(\"mapView\"));\n\/\/ add a map layer\nvar l = new m.MapLayer(\"Map\");\nl.urlTemplate = \"https:\/\/stamen-tiles.a.ssl.fastly.net\/terrain\/{z}\/{x}\/{y}.jpg\";\nl.attribution = 'Map tiles by <a href=\"http:\/\/stamen.com\">Stamen Design<\/a>, under <a href=\"http:\/\/creativecommons.org\/licenses\/by\/3.0\">CC BY 3.0<\/a>. Data by <a href=\"http:\/\/openstreetmap.org\">OpenStreetMap<\/a>, under <a href=\"http:\/\/www.openstreetmap.org\/copyright\">ODbL<\/a>.';\nview.layers.add(l);\n<\/pre>\nview.theme = \"standard\";<\/pre>\n
var worldCupLocations = [\n\t { location: new m.LatLong(47.751076, -120.740135), city: \"Washington\", year: 2026, winner: \"unknown\" },\n\t { location: new m.LatLong(45.424721, -75.695000), city: \"Ottawa\", year: 2026, winner: \"unknown\" },\n\t { location: new m.LatLong(19.432608, -99.133209), city: \"Mexico City\", year: 2026, winner: \"unknown\" },\n\t { location: new m.LatLong(25.285446, 51.531040), city: \"Doha\", year: 2022, winner: \"unknown\" },\n...........................\n...........................\n}];<\/pre>\n\/\/ create some markers with default css styling\nworldCupLocations.forEach(\n\tfunction (tournamentHost){\n\t\tthis.decorations.add(new m.Marker(tournamentHost.location));\n\t}, pins);\n<\/pre>\n\/\/ add a decoration layer for world cup images\nvar markers = new m.DecorationLayer(\"World Cup Markers\");\nmarkers.visible = true;\nview.layers.add(markers);\n<\/pre>\n
\n![](\"https:\/\/mindfusion.dev\/samples\/javascript\/mapping\/map_pins.png\" "\\"FIFA")
\nIII. The Captions<\/strong>
\nFor the captions we need a new DecorationLayer<\/a> It will hold Bubble<\/a> instances, whose text<\/a> property will render the text. The text<\/a> property supports styled text and we can use HTML formatting tags to make our bubble beautiful.<\/p>\nvar bubble = new m.Bubble(tournamentHost.location);\nbubble.text = \">div align=\"\\\"center\\\"\"<>strong<Location:>\/strong< \" + tournamentHost.city + \t\t\"\n>strong<Year:>\/strong< \"+ tournamentHost.year + \"\n>strong<Winner:>\/strong< \" + tournamentHost.winner + \">\/div<\";\nbubbles.decorations.add(bubble);\n<\/pre>\n