Skip to content
This repository has been archived by the owner on Dec 31, 2020. It is now read-only.

Latest commit

 

History

History
163 lines (136 loc) · 5.45 KB

README.md

File metadata and controls

163 lines (136 loc) · 5.45 KB
Raw

Integrating| Embedding| Hosting|

MakeMaps

Map Previews

#Note> this package is not maintained

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.

Integrating

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

Sample of an integration baseline: https://github.com/spaasis/MakeMapsIntegrationTests

Installing

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",
    ...
  },

webpack.config:

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';

API

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'
}];

<MakeMaps
  data={data}
  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.

Events

  • 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;"
src="https://spaasis.github.io/MakeMaps/
?
mapURL=https://spaasis.github.io/MakeMaps/demos/symboldemo.mmap"</iframe>

Hosting

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