# ddj.map.js ddj.map makes it easier working with data on maps * [get the npm package](https://www.npmjs.com/package/ddj.map) * [get some sample](https://tursics.github.io/ddj.map.js/sample/) This is one of the very first version of this npm package. Adding more functionality and removing the bugs occupy much time. So the documentation suffers a lot. ## Write your own map ### 1. Create a HTML file template Create a new and empty HTML file. Copy the code below and get a blueprint of a simple website. The lines beginning with ``` ``` Language setting, e.g. ```lang="de"``` for map attribution. ``` html ``` ### 2. use the lib and choose a theme Replace ... ``` html ``` ### 3. set a data source Replace ... ``` html ``` ```dataType``` is one of * json (default) * geojson * csv * wfs (in planning) If you see CORS problems use ``` html ``` Additional ... ``` html ``` Info ... CORS problems should be solved by 3rd party proxy ### 4. setup the map Replace ... ``` html
``` openstreetmap style or mapbox style ... ``` html ``` ### 4b. attribute Replace ... ``` html
ddj.map
``` ### 5. show map pins Replace ... * white * red * darkred * lightred * orange * beige * green * darkgreen * lightgreen * blue * darkblue * lightblue * purple * darkpurple * pink * cadetblue * gray * lightgray * black Font Awesome 5.x [register for free...](https://fontawesome.com/start) ``` html ``` ### x. setup libs ``` html ``` ### x. other configuration ``` html dataShareURI = tools.getMetaContent('ddj:shareURI') searchTitleColumn = tools.getMetaContent('ddj:searchTitleColumn') || '', searchDescriptionColumn = tools.getMetaContent('ddj:searchDescriptionColumn') || '', data-hide-if-zero ``` ### x. save parameter in url ``` html Berlin ddj.autostart.onInitURL(function(obj) { console.log(obj); }); ddj.autostart.onKeyValueLinkClicked(function(key, value) { console.log(key, value); }); ddj.url.replace({city: 'Berlin'}); ddj.url.push({city: 'Berlin'}); ``` ### x. prepare for Google, Facebook and Twitter Replace ... ``` html Website title ``` ### x. write a tutorial ``` html
text for page 1
text for page 2
``` ### x. advanced - add some interaction ``` html ``` ### To Do Include polyfill for * [CSS.escape](https://github.com/mathiasbynens/CSS.escape) ## Build your own package To build the package, use: ```npm run build``` To build the package and run a watcher, use: ```npm run watch``` To publish the package on npmjs.com: * open ```package.json``` and increase the version number * increase the version number in this ```README``` file * increase the version number in ```sample/sample.js``` file * ```npm run release``` * fill in the npmjs.com credencials * push and tag the version in github