Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    Integrating| Embedding| Hosting|


    build status

    alt text

    MakeMaps is a map creation tool that takes in data in multiple formats and outputs a powerfully visualized map.

    It is built on Leaflet and OpenStreetMaps by React/TypeScript using MobX for state control.


    You can integrate MakeMaps as a part of a larger React application through React properties.

    Sample of an integration baseline:


    Make sure you have these loaders in package.json:

    "devDependencies": {
        "css-loader": "^0.26.0",
        "file-loader": "^0.9.0",
        "json-loader": "^0.5.4",
        "style-loader": "^0.13.1",
        "url-loader": "^0.5.7",


    loaders : [
            test: /\.json$/,
            loader: "json-loader"
            test: /\.css$/,
            loader: "style-loader!css-loader"
            test: /\.png$/,
            loader: 'url-loader',
            query: { mimetype: 'image/png' }
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'url-loader'
    1. npm i makeMaps --save
    2. npm install

    In your typescript (tsx) file:

    import { MakeMaps } from 'makeMaps';


    var data = [{
        id: 1,
        type: 'general',
        content: '{ "field1": [1, null, 3, 4, 5, 6], "field2": ["a", null, "c", "d", "e", "f"], "loc": [[27.68, 62.899], [27.68, 62.898], [27.68, 62.897], [27.68, 62.896], [27.68, 62.895], [27.68, 62.894]] }',
         // Use either data or content (see below)
        data: { field1: [1, null, 3, 4, 5, 6], field2: ["a", null, "c", "d", "e", "f"], loc: [[27.68, 62.899], [27.68, 62.898], [27.68, 62.897], [27.68, 62.896], [27.68, 62.895], [27.68, 62.894]] },
        columns: null,
        projection: null,
        latName: null,
        lonName: null,
        name: 'Layer2'
      viewOptions={{ showMenu: true, showExportOptions: true, allowLayerChanges: true, language: 'en', showWelcomeScreen:false }}
      mapOptions={{ attributionExtension: '', mapCenter: [15,16], zoomLevel: 4, baseMapName: 'OSM Black&White' }}
      onMapDoubleClick={null} />

    Data - list of data to load to map

    • id (number) unique data id
    • name display name of the map layer created from this data
    • type file type of the data
      • general|csv|gpx|kml|geojson|wkt
    • data the data as JS object (optional. Use this for General or GeoJSON formats. Either data or content is required)
    • content the data as a string (optional. Use this for CSV,GPX,KML,WKT formats. Can also be used for General or GeoJSON)
    • columns (string[]) the columns to use. If null, every column will be used.
    • projection the map projection. If null, WGS84 will be used.
    • latName name of the latitude column
    • lonName name of the longitude column

    Map options - general map options

    • attributionExtension text to add to map attribution text
    • mapCenter ([number,number]) map center coordinate. Default null
    • zoomLevel (number) map default zoom level. Default null
    • baseMapName name of the map base layer. Default OSM Streets
      • OSM Streets | OSM Black&White | OpenTopoMap | Stamen Toner | Stamen Watercolor | null

    View options - MakeMaps menu and general view options

    • showMenu (bool) show MakeMaps menu. NOTE: if this is disabled, map elements will not be customizable. Default true
    • language (fi|en) the menu display language. Default English
    • showExportOptions (bool) show map download options on menu. Default true
    • allowLayerChanges (bool) allow the creation and removal of additional layers through menu. Default false
    • showWelcomeScreen (bool) show the MakeMaps welcome screen when there is no data to load. Setting this to false shows an empty map.


    • onMapDoubleClick Track double click events on the map. Can be used to highlight items or geocode existing data in the host app. This method has three parameters:
      • layerId - if the user double clicked on a map feature, the layer id of the clicked feature. Undefined if no feature.
      • featureId - if the user double clicked on a map feature, the unique id (by the order of addition) of the clicked feature. Undefined if no feature.
      • geoJSON - either the feature's GeoJSON presentation OR a new GeoJSON object with the coordinates of the click.

    Embedding a map

    There are two ways to embed maps to your website/blog:

    Download the embed code from the editor

    1. Upload file to MakeMaps
    2. Make visualizations
    3. Go to the Download-menu
    4. Click "Save embed code" and download the .html file
    5. Copy&paste the code in the html file to your page

    Refer to a hosted file

    1. Create a .mmap file from your data
    2. Upload to MakeMaps
    3. Make visualizations
    4. Go to the Download-menu and click "Save as a file"
    5. Host your file someplace where it can be accessed remotely
    6. Use an IFrame to embed into your page:
    7. src - pointing to the index.html on a hosted MakeMaps instance
    8. mapURL - URL of the .mmap-file
    <iframe style="height: 400px; width: 400px;"


    1. git clone
    2. npm install
    3. open index.html
    If you want the demos, fetch them from the gh-pages-branch

    License: GPL V3


    Simo Paasisalo Mail|LinkedIn


    npm i makeMaps

    Downloadslast 7 days







    last publish


    • avatar