{"id":2666,"date":"2021-02-25T15:27:00","date_gmt":"2021-02-25T15:27:00","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2666"},"modified":"2021-02-25T15:38:42","modified_gmt":"2021-02-25T15:38:42","slug":"the-canvaslayer-in-javascript-maps","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/the-canvaslayer-in-javascript-maps\/","title":{"rendered":"The CanvasLayer in JavaScript Maps"},"content":{"rendered":"

In this blog post we are going to use the CanvasLayer<\/a> of the JavaScript map library to build a web page that renders a city map with overlay polygons of the districts, covered by various couriers of a company. Each area is a separate in different color. Here is the final result:<\/p>\n

\"Canvas<\/a><\/p>\n

<\/p>\n

I. General Setup<\/strong><\/p>\n

We start with an empty web page where we add the references to the mapping JavaScript file and the other files that contain Utility classes used by the mapping library:<\/p>\n

<script src=\"Scripts\/MindFusion.Common.js\"\ntype=\"text\/javascript\"><\/script> <script\nsrc=\"Scripts\/jscommon.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/jscollections.js\"\ntype=\"text\/javascript\"><\/script> <script\nsrc=\"Scripts\/MindFusion.Mapping.js\"\ntype=\"text\/javascript\"><\/script><\/pre>\n
In the HEAD section of the web page we add references to the CSS themes that are available for the mapping library:<\/p>\n\n\nThen we need to create a DIV with an id. The DIV element is where the map will be rendered, so we must give it the position and size that we want our map to have. We make ours take most if the web page:\n\n\n\n\n\n\n\n\n\n\n\n
<div style=\"top: 70px; bottom: 24px;\">\n\t\t<div style=\"position: absolute; width: 100%; height:\n100%;\"> <div id=\"mapView\" style=\"height: 100%; width: 100%;\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div><\/pre>\n
II. The MapView and the MapLayer<\/strong><\/p>\n
Each map created by MindFusion mapping library is represented by a MapView and a MapLayer. The MapView<\/a> class requires a reference to an HTML Element and we use the DIV, which we initialized in the web page as a parameter. Once we’ve created the view, we can customize its looks by assigning a given theme to it. The name of each theme corresponds to the name of the CSS file where its settings are stored. We use the standard theme in our map:<\/p>\n
\/\/ create a new instance of the mapView\nvar view = new m.MapView(document.getElementById(\"mapView\"));\nview.theme = \"standard\";<\/pre>\n
The map tiles are provided by Tile Mapping Service. There are both free and paid options of TMS servers. In our sample we use the maps provided by stamen.com and credit them accordingly. The MapLayer<\/a> has a special property called attribution<\/a> where you place the URL and credit of the map tile provider, if needed.<\/p>\n
var l = new m.MapLayer(\"Map\");\n\nl.urlTemplate = \"http:\/\/d.tile.stamen.com\/terrain\/{z}\/{x}\/{y}.png\";\nl.attribution = 'Map tiles by Stamen\nDesign<\/a>, under CC BY 3.0<\/a>. Data\nby OpenStreetMap<\/a>, under ODbL<\/a>.';\nview.layers.add(l);<\/pre>\n
After we’ve created the MapLayer<\/a> we add it to the layers collection<\/a> of the MapView<\/a>.<\/p>\n
III. CanvasLayer Instances<\/strong><\/p>\n
The CanvasLayer<\/a> is the layer that can hold polygon or circle drawings. Both type of drawings support fill<\/a> and stroke,<\/a> which is how we can make the polygons semi-transparent. The Poly<\/a> constructor requires a list with the points that build the figure. The figure can be closed<\/a> and smooth<\/a> . In our case we want a closed figure but turn the smooth<\/a> option off. We also have the option to specify strokeThickness . Note that the thickness is provided in meters e.g. it will change with the zoom ratio of the map. Here is a sample list with points for one of the area regions:<\/p>\n
\/\/John Wilson\nvar points = [\n    new m.LatLong(42.70475564699256, 23.31153304748534),\n    new m.LatLong(42.70557559570199, 23.3120480316162),\n    new m.LatLong(42.70488179365276, 23.32380683593749),\n    new m.LatLong(42.69773045026787, 23.32174689941405),    \n    new m.LatLong(42.699835727309186, 23.310202671813954)];<\/pre>\n
We create then a new CanvasLayer<\/a> and add it to the layers
\nproperty<\/a> of the MapView<\/a> :<\/p>\n
var drawings = new m.CanvasLayer(\"John Wilson\");\nview.layers.add(drawings);<\/pre>\n
The name of the layer, which  we provide in the constructor will render in the map layers legend: if we do not turn it off. Then we need to create the Poly<\/a> instance using the points<\/a> array. Once we have customized it we need to add it to the decorations<\/a> collection of the CanvasLayer. It is important to note that the drawing is a decoration, not a direct part of the layer itself.<\/p>\n
\/\/ create a smooth polyline connecting the points\nvar poly = new m.Poly(points);\npoly.stroke = \"#4164BE\";\npoly.fill = \"rgba(65, 100, 190, 0.4)\";\n\/\/ stroke thickness in meters\npoly.strokeThickness = 2;\npoly.strokeDashStyle = d.DashStyle.Solid;\npoly.smooth = false;\npoly.closed = true;\ndrawings.decorations.add(poly);<\/pre>\n
With that ready, we can see the polygon rendering over the terrain map. Once we are finished initializing the CanvasLayer<\/a> instances, we can set the active layer of the view and specify the point that will render when it loads. Note: you should specify the point that renders in the center when the page loads only after you’ve finished all other initialization and customization of the map:<\/p>\n
\/\/ set the topmost map layer\nview.activeLayer = view.mapLayers.items()[0];\n\n\/\/ load all layers\nview.load(new m.LatLong(42.69743870212541, 23.3230343597412), 15);<\/pre>\n
And with that we have finished building our map. You can run the sample from this link:<\/p>\n
Run the Sample<\/a><\/p>\n
You can download the full source code with all libraries used from this link:<\/p>\n
Coverage Map in JavaScript: Download the Sample<\/a><\/p>\n
Technical support is available at MindFusion forum at https:\/\/mindfusion.dev\/Forum\/YaBB.pl<\/a><\/p>\n
About MindFusion Mapping for JavaScript:<\/i> The mapping library is written in pure JavaScript and supports a rich API for creating and customizing any type of map. The component requires a Tile Map Service (TMS) as a provider for the map. There is a special property to credit the TMS providers, if you need to.<\/p>\n
Mapping for JavaScript supports unlimited number of map layers. The layers can hold pins, labels, markers, image icons, annotations or polygons. They can be turned on or off. The appearance of the map UI is specified through themes. Each map supports zoom and pan.  Find out more about Mapping for JavaScript at https:\/\/mindfusion.dev\/javascript-map.html<\/a>.<\/p>\n<\/pre><link>\n","protected":false},"excerpt":{"rendered":"
In this blog post we are going to use the CanvasLayer of the JavaScript map library to build a web page that renders a city map with overlay polygons of the districts, covered by various couriers of a company. Each … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[513,73,74],"tags":[662,665,663,664,666],"class_list":["post-2666","post","type-post","status-publish","format-standard","hentry","category-javascript","category-mapping","category-sample-code","tag-javascript-map","tag-javascript-map-coverage","tag-js-map-tutorial","tag-map-areas","tag-map-regions"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-H0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2666"}],"version-history":[{"count":8,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2666\/revisions"}],"predecessor-version":[{"id":2674,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2666\/revisions\/2674"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}