{"id":2846,"date":"2024-02-18T09:22:47","date_gmt":"2024-02-18T09:22:47","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2846"},"modified":"2024-02-18T12:42:24","modified_gmt":"2024-02-18T12:42:24","slug":"render-online-maps-using-your-own-tile-map-files-and-mindfusion-mapping-library-for-javascript","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/render-online-maps-using-your-own-tile-map-files-and-mindfusion-mapping-library-for-javascript\/","title":{"rendered":"Render Online Maps Using Your Own Tile Map Files and MindFusion Mapping Library for JavaScript"},"content":{"rendered":"

In this blog post we are going to show you how to use the free mapping files, available for download from various resources and convert them to image files so they can be rendered through the URL http:\/\/your_website\/files_location\/{z}\/{x}\/{y}.png You will get acquainted with various sources of map data files, different tools to convert and export the files into raster images. Finally, you will use MindFusion’s JS Mapping library to create a map that uses the image files, you have prepared and uploaded on your own server.
\n<\/a>
\n<\/p>\n

I. Mapping Data Resources: TileMill, Natural Earth and More<\/h2>\n

The first step in creating your own interactive map is getting geo, GPS, satellite or other data. We list here resources, who offer free downloadable files. We will list a couple of free, open source tools for converting between the file formats, so in general, you can start with any data, no matter the format it is offered in.<\/p>\n

<\/a><\/p>\n

*.mbtiles files with data for the planet or per continent are available from this link:<\/p>\n

https:\/\/www.reddit.com\/r\/openstreetmap\/comments\/v9yoed\/downloadable_planet_europe_and_netherlands\/<\/a><\/p>\n

The files are very large and converted to raster files the whole data would be in the amount of tens of gigabytes – suitable for serious, detailed projects.<\/p>\n

TileMill<\/strong> is a map design studio, which is open source and available from git hub here: https:\/\/github.com\/tilemill-project\/tilemill<\/a><\/p>\n

TileMill runs under Unix-like machines (Linux, MacOS) and uses the browser as UI interface. The readme notes list the row of commands to run to install the application. It runs on your local machine at http:\/\/localhost:20009\/<\/p>\n

TileMill offers a set of predefined projects with maps and one of them is a beautiful political map of the world, which can be exported to a variety of file formats, including .mbtiles<\/p>\n

If you are on the hunt for terrain data, the Natural Earth project lists TIF files that can be converted to *.mbtiles with tools listed below. The files are in several sizes and you can download the one that suits your needs. Here is the link:
\nhttps:\/\/www.naturalearthdata.com\/downloads\/10m-raster-data\/10m-natural-earth-1\/<\/a><\/p>\n

II. Converting Data Files to the *.mbtiles Format<\/h2>\n

Whatever the initial mapping data file, we must provide an *.mbtiles file to the MBUtil<\/strong> tool, which we will use to prepare the PNG files used by MindFusion\u2019s Mapping library.<\/p>\n

The first way to create the *.mbtiles file is to export it from TileMill. TileMill supports various export options and you can play with the settings and see how they affect the output file size. You can create your own map projects, load additional layers from various files like *shp, TIF, etc. and export the final map.<\/p>\n

Another option to create an *.mbtiles file is to use the GDAL<\/strong> tool. This is a very powerful tool, which, in contrast to TileMill is in active development. You can read how to install it from the following links:<\/p>\n

https:\/\/discussions.apple.com\/thread\/254510018?sortBy=best<\/a>
\nand
\nhttps:\/\/mits003.github.io\/studio_null\/2021\/07\/install-gdal-on-macos\/<\/a><\/p>\n

Detailed GDAL documentation is available at<\/p>\n

https:\/\/gdal.org\/programs\/index.html<\/a><\/p>\n

Once you have installed GDAL, you can use the GDAL translate utility to convert between files. For example, in order to convert a TIF file into an *.mbtiles file, you need to run something like that:<\/p>\n

gdal_translate -oo ZOOM_LEVEL=10 -of mbtiles \/Users\/the_user\/Downloads\/NE1_HR_LC_SR_W\/NE1_HR_LC_SR_W.tif \/Users\/the_user\/Downloads\/NE1_HR_LC_SR_W\/terrain_map.mbtiles<\/pre>\n
This is the command that converts the specified TIF file into a new *.mbtiles file using the specified zoom level. By default, the GDAL utility will choose the maximum possible zoom level when converting, but you can opt for a lower level with the -oo ZOOM_LEVEL=XXX<\/strong> option.<\/p>\n

\nA good explanation of the GDAL translate tool and the options when converting between files is found here:<\/p>\n
https:\/\/gist.github.com\/jbaranski\/0073f7b98bdf1f64f49988853daed67b<\/a><\/p>\n
and here<\/p>\n
https:\/\/www.geos.ed.ac.uk\/~smudd\/TopoTutorials\/html\/tutorial_raster_conversion.html<\/a><\/p>\n
III. Prepare the Raster Files<\/h2>\n
Once the *.mbtiles is ready, it is tile to install MBUtil.<\/strong> You can read about the project, download it and read the installation instructions from here:<\/p>\n
https:\/\/github.com\/mapbox\/mbutil<\/a>
\nWhen you are ready with the installation, the command to convert the *.mbtiles file to image files is this:<\/p>\n
.\/mb-util world.mbtiles tiles<\/pre>\n
Depending on your machine, you might drop the first two characters that define the current directory and run:<\/p>\n
mb-util world.mbtiles tiles<\/pre>\n
This converts a world.mbtiles file to image tiles located into the tiles directory. Note that the MBUtil tool supports various options, among which is to specify the format of the images. We go for PNG, which is the default.
\n
\nOnce the images are ready, you can upload them to your server. Check your hosting plan for the quota not only for disk space but also number of files. When your tiles are on the server, you can build your map.<\/p>\n
IV. Build The Map<\/h2>\n
Create an empty folder, where we will store the project. Let’s name it my_map. Navigate to it in terminal and run
\nFirst, create a new npm project:<\/p>\n
npm init<\/pre>\n
Follow the steps to create a new project. We have named ours my_map and specified the start file will be index.js Now it’s time to add the mapping library. Mapping is part of MindFusion Pack for JavaScript, so the easiest way to get the library files is to install the pack from npm:<\/p>\n
npm i @mindfusion\/pack<\/pre>\n
Run the command from the directory where you have created your project. All JavaScript files for all libraries in the pack are downloaded in the directory node-modules. For the map, we need drawing, controls, common, common-collections and mapping. We create an empty HTML page and reference them from the respective directories.<\/p>\n
  <script src=\"node_modules\/@mindfusion\/drawing\/dist\/umd\/drawing.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"node_modules\/@mindfusion\/controls\/dist\/umd\/controls.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"node_modules\/@mindfusion\/common\/dist\/umd\/common.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"node_modules\/@mindfusion\/common-collections\/dist\/umd\/common-collections.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"node_modules\/@mindfusion\/mapping\/dist\/umd\/mapping.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"index.js\" type=\"text\/javascript\"><\/script>\n<\/pre>\n
Finally, we reference the index.js code-behind file, which we have created. This is an empty file, for now. In the web page we need to create a DIV element, where the map will render:<\/p>\n
<div style=\"top: 10px; bottom: 24px;\">\n\t\t<div style=\"position: absolute; width: 100%; height: 100%;\">\n\t\t\t<div id=\"mapView\" style=\"height: 100%; width: 100%;\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/pre>\n
The map will be the size and location of the DIV we have designated for it. This is all for the web page, let’s edit the JavaScript code-behind file:<\/p>\n
var m = MindFusion.Mapping;\n\n\/\/ create a new instance of the mapView \nview = new m.MapView(document.getElementById(\"mapView\"));\n\nvar l = new m.MapLayer();\nl.urlTemplate = \"https:\/\/ubydesign.net\/maps\/meta_data2\/{z}\/{x}\/{y}.png\";\nview.layers.add(l);\n<\/pre>\n
We create a namespace mapping and use the DIV element, whom we’ve given an ID, to create a new MapView<\/a> instance. This is the class that renders the maps. We also create a new MapLayer<\/a>. A MapView by default does not render anything – we need to add MapLayer-s to it. The layers can be for decorations, locations, labels, but most important – we need a layer with terrain, street or other data to specify the raster tiles. The urlTemplate property<\/a> must point to the location of the tiles. In our case, we have uploaded the directory with the raster tiles at https:\/\/ubydesign.net\/maps\/meta_data2\/. Change the URL with the location of your tiles at your server. Finally, we add the layer to the layers collection of the mapView.<\/p>\n
In order to show the map, you need to call the —load method. It requires the location of a point to load in the center of the map and a zoom factor.<\/p>\n
view.load(new m.LatLong(51.505, -0.09), 4);\n<\/pre>\n
For our map, we have also added a location marker.<\/p>\n
var mark = new m.Marker();\nmark.location = new m.LatLong(51.505, -0.09);\nview.decorations.add(mark);\n<\/pre>\n
Note: all code regarding map decoration, layers, info bubbles etc. must be called before mapView.load.<\/p>\n
Loading the view should be the last line of code regarding the map initialization.<\/p>\n
And now, if you double click the index.html file it will open in your default browser and you should be able to see your map.<\/p>\n
Congratulations! You’ve just created a map that loads its own data from your own server using raster images you have prepared yourself. The whole process uses free open-source tools and data and provides you a way to host and serve your own maps without relying on a 3rd part TMS (tile map server) service. Enjoy!<\/p>\n
You can download the source code of the project from this link:<\/p>\n
Download the Mapping Sample Source Code<\/a><\/p>\n
run “npm install” in the directory, where you have extracted the archive and open the index.html file in the browser.<\/p>\n
Learn more about MindFusion.Mapping<\/a> and MindFusion Pack for JavaScript<\/a> at their respective pages. Technical support is available at MindFusion’s forum.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post we are going to show you how to use the free mapping files, available for download from various resources and convert them to image files so they can be rendered through the URL http:\/\/your_website\/files_location\/{z}\/{x}\/{y}.png You will … 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,2],"tags":[713,712,714,715,717],"class_list":["post-2846","post","type-post","status-publish","format-standard","hentry","category-javascript","category-mapping","category-product-releases","tag-gdal","tag-maps","tag-mbutil","tag-raster-files","tag-tilemill"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-JU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2846","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=2846"}],"version-history":[{"count":18,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2846\/revisions"}],"predecessor-version":[{"id":2877,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2846\/revisions\/2877"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}