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

  1. Create a folder
  2. (Optional) Download latest release into the folder and unzip it.
  3. 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>
                            
  4. Open the hello.html directly in the browser and THAT’S IT!
  5. Now proceed to the wiki, check out the examples and start to make some incredible maps!