Getting Started - maptalks

5-min Quick Start of maptalks.js

This QuickStart goal is to help you run a maptalks.js map application and let you warm up for the remaining documentation samples.

Steps

Create a folder
(Optional) Download latest release into the folder and unzip it.

Create a hello.html in the folder.

Include maptalks css file in the head section, you can either use jsdelivr.net or downloaded one in step 2.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">

Include maptalks script in the head section, you can either use jsdelivr.net or downloaded one in step 2.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>

Content of hello.html:

 <!DOCTYPE>
 <html>
 <head>
     <meta charset="UTF-8" />
     <title>Maptalks Quick Start</title>
     <!-- or link to your downloaded files -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
 </head>
 <body>
 <div style="width:800px;height:600px;" id="map"></div>
 <script type="text/javascript">
   // create map in div 'map'
   var map = new maptalks.Map('map', {
     center: [0, 0],
     zoom: 2,
     baseLayer: new maptalks.TileLayer('base', {
       'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
       'subdomains'  : ['a','b','c','d'],
       'attribution'  : '&copy; <a href="http://www.osm.org/copyright">OSM</a> contributors, '+
       '&copy; <a href="https://carto.com/attributions">CARTO</a>'
     })
   });
 </script>
 </body>
 </html>

Open the hello.html directly in the browser and THAT’S IT!
Now proceed to the wiki, check out the examples and start to make some incredible maps!