ddj.map

1.0.21 • Public • Published

ddj.map.js

ddj.map makes it easier working with data on maps

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 <!-- are placeholder for later use.

<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />

    <!-- put in your app icon here -->
    <!-- put in the lib here -->
    <!-- put in the data here -->
    <!-- put in the map here -->
    <!-- put in the map pins here -->

    <!-- placeholder for Google, Facebook and Twitter -->
</head>
<body>
</body>
</html>

Language setting, e.g. lang="de" for map attribution.

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">

2. use the lib and choose a theme

Replace ...

<!-- put in the lib here -->
<link rel="stylesheet" href="https://unpkg.com/ddj.map@1.0.21/dist/ddj.map.css" />
<script src="https://unpkg.com/ddj.map@1.0.21/dist/ddj.map.js"></script>

3. set a data source

Replace ...

<!-- put in the data here -->
<meta name="ddj:data" content="path/to/data.csv">
<meta name="ddj:dataType" content="csv">
<meta name="ddj:dataUniqueIdentifier" content="id">

dataType is one of

  • json (default)
  • geojson
  • csv
  • wfs (in planning)

If you see CORS problems use

<meta name="ddj:dataUseCorsProxy" content="cors-anywhere.herokuapp.com">

Additional ...

<meta name="ddj:dataIgnoreSecondLine" content="false">
<meta name="ddj:dataIgnoreLastLine" content="false">
<meta name="ddj:dataNoCache" content="true">
<meta name="ddj:dataDelimiter" content=",">
<meta name="ddj:latitudeColumn" content="lat">
<meta name="ddj:longitudeColumn" content="lng">

Info ... CORS problems should be solved by 3rd party proxy

4. setup the map

Replace ...

<!-- put in the map here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<meta name="ddj:mapCenter" content="52.527040, 13.338440"> <!-- center old city hall of Berlin-Mitte -->
<meta name="ddj:mapZoom" content="13">

<body class="m-0">
    <div data-map id="map"></div>
</body>

openstreetmap style or mapbox style ...

<meta name="ddj:mapboxToken" content="pk.eyJ1IjoidHVyc2ljcyIsImEiOiI1UWlEY3RNIn0.U9sg8F_23xWXLn4QdfZeqg">

4b. attribute

Replace ...

<body class="m-0">
    <div data-map id="map">
        <div data-map="attribution">
            <a href="https://www.npmjs.com/package/ddj.map" title="ddj.map" target="_blank">ddj.map</a>
        </div>
    </div>
</body>

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...

<!-- put in the map pins here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
<script src="https://kit.fontawesome.com/d2a4339e1e.js" crossorigin="anonymous"></script>
<meta name="ddj:pinColor" content="cadetblue">
<meta name="ddj:pinIconPrefix" content="fas">
<meta name="ddj:pinIcon" content="fa-certificate">

<meta name="ddj:pinColorColumn" content="pin-color">
<meta name="ddj:pinIconPrefixColumn" content="pin-icon-prefix">
<meta name="ddj:pinIconColumn" content="pin-icon">

<meta name="ddj:borderColor" content="darkred">
<meta name="ddj:borderWeight" content="1">
<meta name="ddj:fillColor" content="red">
<meta name="ddj:fillOpacity" content=".25">

<meta name="ddj:invertPolygons" content="true">

<meta name="ddj:borderColorColumn" content="border-color">
<meta name="ddj:borderWeightColumn" content="border-weight">
<meta name="ddj:fillColorColumn" content="fill-color">
<meta name="ddj:fillOpacityColumn" content="fill-opacity">

x. setup libs

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

x. other configuration

dataShareURI = tools.getMetaContent('ddj:shareURI')
searchTitleColumn = tools.getMetaContent('ddj:searchTitleColumn') || '',
searchDescriptionColumn = tools.getMetaContent('ddj:searchDescriptionColumn') || '',

data-hide-if-zero

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.11/jquery.autocomplete.min.js"></script>

x. save parameter in url

<a href="#" data-key="city" data-value="Berlin">Berlin</a>

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 ...

<meta name="author" content="My name" />
<meta name="keywords" content="comma,separated,list,of,keywords" />
<meta name="robots" content="index,follow" />

<title>Website title</title>
<meta property="og:title" content="Website title" />

<meta name="description" content="Website description" />
<meta property="og:description" content="Website description" />

<link rel="image_src" type="image/png" href="http://path/to/website/assets/social.png" />
<meta property="og:image" content="http://path/to/website/assets/social.png" />

<meta property="og:url" content="http://path/to/website/">

<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitter_handle">
<meta name="twitter:creator" content="@twitter_handle">

<!-- put in your app icon here -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

x. write a tutorial

<div data-role="popup" data-tutorial="dialog" id="popupTutorial" data-theme="b" class="ui-corner-all">
    <div data-tutorial="page">
        text for page 1
    </div>
    <div data-tutorial="page">
        text for page 2
    </div>
</div>

x. advanced - add some interaction

<script>
    ddj.autostart.onDone(function() {
        ddj.map.get().scrollWheelZoom.disable();
    });

    ddj.autostart.onAddMarker(function(marker, value) {
        marker.index = key;
        marker.count = valCount;
        marker.lat = lat;
        marker.lng = lng;
        marker.color = 'blue';
        marker.opacity = 1;
        marker.clickable = 1;
        marker.iconPrefix = 'fa';
        marker.iconFace = 'fa-dot-circle-o';

        return true;
    });

    // for geojson files...
    ddj.autostart.onAddMarker(function(marker, value) {
        marker.borderColor = '#088';
        marker.borderWeight = 1;
        marker.fillColor = '#8ff';
        marker.fillOpacity = .5;
        marker.dashArray = null;
        marker.dashOffset = null;
    });

    ddj.autostart.onSelected(function(selectedItem) {
        console.log(selectedItem);
    });

</script>

To Do

Include polyfill for

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

Readme

Keywords

Package Sidebar

Install

npm i ddj.map

Weekly Downloads

20

Version

1.0.21

License

MIT

Unpacked Size

632 kB

Total Files

8

Last publish

Collaborators

  • tursics