Build custom responsive web mapping applications without any coding!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
screenshots
LICENSE
README.md
build.html
index.html

README.md

Mapzap

Build custom responsive web mapping applications without any coding!

A simple, lightweight tool for quickly standing up responsive web mapping applications (mapzaps) without having to write any code. Built on the Google Maps JavaScript API, this utility lets you configure your settings via simple URL parameters. Feed it a source data file in GeoJSON format (or CSV with latitude & longitude columns), give it a title, icon, and tell it which data fields you want to show, and you get a responsive, mobile-friendly "mapzap" for viewing and interacting with your data. Your mapzap can be shared, embedded into websites and blogs, and added to your mobile device's homescreen for a native, full screen experience. Use geojson.io, GeoEditor, Fulcrum, QGIS or any other modern mapping tool to generate your GeoJSON, place it on a web server, push it to GitHub, Google Drive, Dropbox, etc. or save it as a Gist and quickly wrap it up as a responsive web app.

Get Started

Use the Builder Tool to quickly build your Mapzap!

You can also download or fork this repo and host your own version. If you self-host, please use your own Google Maps API key.

Features

  • Fullscreen mobile-friendly web app with responsive navbar, modal popups, and map/table/split views.
  • Built on the incredibly popular Bootstrap and Google Maps frameworks.
  • Configure everything via URL parameters (no coding necessary)!
  • Define data source, app title, icon, display fields/properties & data attribution manually or with the Builder Tool.
  • Completely client-side, can be hosted for free on GitHub Pages
  • Supports custom feature styling and StreetView integration
  • Interactive feature table with filtering, sorting, and column toggling via Bootstrap Table

Screenshots

Mapz

Mobile

Builder

Builder

Examples

URL Parameters

Parameter Options Description Required Default
src GeoJSON or CSV URL to web accessible GeoJSON or CSV file True NA
title Any string Navbar, app title False Mapzap
icon Image (PNG, JPG) URL to accessible image for custom navbar icon False NA
fields Any valid properties Comma separated list of specific properties available in table False All
hidden Any valid properties Comma separated list of specific properties to hide in table False All
hover Any valid properties Comma separated list of specific properties to show on hover False NA
where Any AlaSQL WHERE clause Filter features with AlaSQL WHERE clause (where=properties->cul_matl='Steel Corrugated') False NA
sort Any valid property Initially sort table by this column False NA
order asc / desc Initial column sort order False asc
attribution Any string (URLs supported) Source attribution added to text in bottom right of map False NA
map Any valid map type Google map type (roadmap, satellite, hybrid, terrain) False roadmap
style JSON style options Feature style rules- see examples below False {fillColor:"red","fillOpacity":"0.2","strokeColor":"red","strokeOpacity":"1","strokeWeight":"2"}

JSON Style Options

Feature styling per the google.maps.Data.StyleOptions object specification. You can also categorically style features by defining an object with property and values properties. Values should be an object of values and corresponding CSS3 colors or URLs to marker images.

Single Style Example (SVG symbols)

{
  "fillColor": "blue",
  "fillOpacity": 0.2,
  "strokeColor": "blue",
  "strokeOpacity": 1,
  "strokeWeight": 2,
  "icon": {
    "path": 0,
    "scale": 7,
    "strokeColor": "white",
    "strokeWeight": 1,
    "fillColor": "blue",
    "fillOpacity": 1
  }
}

Single Style Example (Image marker)

{
  "icon": "https://maps.gstatic.com/mapfiles/ms/micons/blue.png"
}

Categorized Style Example (SVG symbols)

{
  "property": "degree_of_damage",
  "values": {
    "Destroyed": "#DA0796",
    "Major": "#CB0D0C",
    "Minor": "#FF8819",
    "Affected": "#FFD300",
    "Inaccessible": "#B3B3B3",
    "No Visible Damage": "#87D30F"
  }
}

Categorized Style (Image markers)

{
  "property": "degree_of_damage",
  "values": {
    "Destroyed": "https://maps.gstatic.com/mapfiles/ms/micons/pink.png",
    "Major": "https://maps.gstatic.com/mapfiles/ms/micons/red.png",
    "Minor": "https://maps.gstatic.com/mapfiles/ms/micons/orange.png",
    "Affected": "https://maps.gstatic.com/mapfiles/ms/micons/yellow.png",
    "Inaccessible": "https://maps.gstatic.com/mapfiles/ms/micons/grey.png",
    "No Visible Damage": "https://maps.gstatic.com/mapfiles/ms/micons/green.png"
  }
}