Coder Social home page Coder Social logo

leaflet_module's Introduction

This module provides integration with Leaflet map scripting library,
http://leaflet.cloudmade.com.

To use, you must download the leaflet library from:
http://leaflet.cloudmade.com/download.html

Alternativelly, you can build the library from source. If so, follow the
instructions at: http://leafletjs.com/download.html#leaflet-source-code

In its current state, maps can be rendered via the included field formatter for
Geofield or by using the API directly.


Installation
------------

1. Normal Drupal module installation

2. Download the Leaflet library from http://leafletjs.com/. Leaflet 0.6 or higher
   is recommended. Extract it to your drupal root /sites/all/libraries/leaflet.
   The file 'leaflet.js' must be found at /sites/all/libraries/leaflet/leaflet.js.
   All other files and folder(s) that come with the library are also needed there.

3. Enable leaflet_views for using Views and Leaflet (see below), or use the display formatters
   for fields display.


API Usage
---------
Building a map is as simple as calling a single method, leaflet_build_map(),
which takes 3 parameters.

$map (array)
An associative array defining a map. See hook_leaflet_map_info(). The module
defines a default map with a OpenStreet Maps base layer.

$features (array)
This is the tricky part. This is an associative array of all the features you
want to plot on the map. A feature can be a point, linestring, polygon,
multilinestring, multipolygon, or json object. Additionally, features can be
grouped into layer groups so they can be controlled together,
http://leaflet.cloudmade.com/reference.html#layergroup. A feature will look
something like:

$features = array(
  array(
    'type' => 'point',
    'lat' => 12.32,
    'lon' => 123.45,
    'icon' => array(
      'iconUrl' => 'sites/default/files/mymarker.png'
    ),
    'popup' => l($node->title, 'node/' . $node->nid),
    'leaflet_id' => 'some unique ID'
  ),
  array(
    'type' => 'linestring',
    'points' => array(
      0 => array('lat' => 13.24, 'lon' => 123.2),
      1 => array('lat' => 13.24, 'lon' => 123.2),
      2 => array('lat' => 13.24, 'lon' => 123.2),
      3 => array('lat' => 13.24, 'lon' => 123.2),
      4 => array('lat' => 13.24, 'lon' => 123.2),
    ),
    'popup' => l($node->title, 'node/' . $node->nid),
    'leaflet_id' => 'some unique ID'
  ),
  array(
    'type' => 'json',
    'json' => [JSON OBJECT],
    'properties' = array(
      'style' => [style settings],
      'leaflet_id' => 'some unique ID'
    )
  )
);

$height (string)
Height of the map expressed in pixels. Append 'px'. Default: '400px'.

Views integration
-----------------

To render a map using Views, enable the module leaflet_views.

You need to add at least one geofield to the Fields list, and select the Leaflet Map style
in Format.

In the settings of the style, select the geofield as the Data Source and select a field for Title
and Description (which will be rendered in the popup).

As a more powerful alternative, you can use node view modes to be rendered in the popup.
In the Description field, select "<entire node>" and then select a View mode.

For a tutorial, please read http://marzeelabs.org/blog/2012/09/24/building-maps-in-drupal-using-leaflet-views/

Roadmap
-------

* UI for managing maps
* Better documentation


Authors/Credits
---------------

* [levelos](http://drupal.org/user/54135)
* [pvhee](http://drupal.org/user/108811)

leaflet_module's People

Contributors

levelos avatar unclegcb avatar pvhee avatar rikdeboer avatar macweber avatar

Watchers

Christopher Gervais avatar cmaltais avatar James Cloos avatar Guillaume Boudrias avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.