Example Usage (view example)
<link rel="stylesheet" href="http://baaqmd.fargeo-dev.com/dist/baaqmd-maps.css">
<script src="http://baaqmd.fargeo-dev.com/dist/baaqmd-maps.js" type="text/javascript"></script>
<style>
body {
margin: 0;
}
#map {
position: absolute;
height: 100%;
right: 0;
left: 0;
}
</style>
<body>
<div id="map"></div>
<script type="text/javascript">
new baaqmdMaps.Map({
container: "map"
});
</script>
</body>Map allows you to create a new baaqmdMaps map by specifying options for how it should render and behave.
new Map(options: Object)options.container(HTMLElementORstring): The HTML element, or the element's stringid, into which the map will render. This element must have no children.options.sidePanel(boolean, defaulttrue): Iftrue, the side panel with layer controls and details will be included with the map.options.sidePanelExpanded(boolean, defaulttrue): Iftrue, the side panel will be expanded by default.options.mapType(stringorArray, default'AQIForecast'): the name of the map type that should be rendered. If it is an array, only those map types included in the array will be in the map type selector, and the first type in the array will be used as the default map type. Map type strings should be one of the following:'AQIForecast','Facilities','ImpactedCommunities','Monitoring','OpenBurning','OverburdenedCommunities'options.enableMapTypeSelector(boolean, defaulttrue): Iftrue, the title in the side panel will allow the user to select between map typesoptions.rootURL(string, default'http://www.baaqmd.gov/'): overrides the default URL for services and contentoptions.accessToken(string, default'pk.eyJ1IjoiYmFhcW1kLXB1YmxpY21hcHMiLCJhIjoiY2szcDJsMTRlMjdnYTNicGhrNGZncXhuYyJ9.iV06_RIzAx1lImQdB-uiMw'): the Mapbox access token to use with this map. Defaults to the "Farallon Development" access token.options.mobile(boolean, defaultfalse): Iftrue, mobile stylesheet will be included with the map. This will likely be removed in the future as complete mobile support is phased in for all maps.options.mobileFullscreen(boolean, defaultfalse): Puts the map into mobile fullscreen mode. Since most mobile browsers don't support fullscreen mode, mobile fullscreen mode is acheived by loading a separate page where the map should be put into mobile fullscreen mode.options.fullscreenURL(string, default'/mobile-fullscreen.html'): the URL that the map should redirect to when entering "mobile fullscreen mode".
el: the HTMLElement into which theMapwas renderedexpandSidePanel(): Expands the side panel (if it is being shown). Returnsboolean, expanded state of side panelcollapseSidePanel(): Collapses the side panel (if it is being shown). Returnsboolean, expanded state of side panelshowSidePanel(): Shows the side panel and related controls. Returnsboolean, shown state of side panelhideSidePanel(): Hides the side panel and related controls. Returnsboolean, shown state of side panel
Install the following dependencies:
Now you can fork & clone this repository to start developing.
After cloning the repo, you'll need to install your package dependencies locally by running the following from the root directory of your cloned repository:
yarn installTo run the app locally, run the following from the root directory of your cloned repository:
yarn devThe application should now be running at http://localhost:3000/
Changes that you make to javascript and CSS files will be automatically refreshed!
Before deploying, you must first build the library by running the following command from the root directory:
yarn buildTo deploy the latest to library and examples to the web, simply build (as per above) then commit and push your local changes, and merge them into to the master branch in Github.
Requires tippecanoe to be installed locally. To generate tiles from the latest local data (stored in data/), run the following command from the root directory:
yarn tilesThis will create an .mbtiles file (data/baaqmd.mbtiles) containing all layers (except for facilities), and then upload those tilesets to Mapbox.
Facilities data are pulled from a JSON feed, converted to a tileset and then uploaded to Mapbox via another script, which also requires tippecanoe:
yarn facilitiesThe tiles and facilities scripts require a secret Mapbox access token for the district account with all public scopes and the following secret scopes:
UPLOADS:READ
UPLOADS:LIST
UPLOADS:WRITE
STYLES:WRITE
STYLES:LIST
TOKENS:READ
TOKENS:WRITE
DATASETS:LIST
DATASETS:WRITE
TILESETS:LIST
TILESETS:READ
TILESETS:WRITE
This key should be put in a file in the project root directory called secret.json with the following content (replacing your secret key in the value):
{
"mapboxKey": "{YOUR SECRET KEY HERE}"
}
Make sure to never share your secret key.