GithubHelp home page GithubHelp logo

dheia / wn-leafletmap-plugin Goto Github PK

View Code? Open in Web Editor NEW

This project forked from josephcrowell/wn-leafletmap-plugin

0.0 0.0 0.0 13 KB

Leaflet Maps for Winter CMS

Home Page: https://computerlink.com.au

License: MIT License

JavaScript 12.27% PHP 82.89% HTML 4.84%

wn-leafletmap-plugin's Introduction

Leaflet Maps for Winter CMS

Simple plugin for displaying map with marked location using Leaflet.js and OpenStreet Maps.

Alternative for those who don't want to or can't use Google Maps or other commercial products.

You can set map center, zoom level, point a marker on the screen and set marker popup text. You can also disable or enable zoom by scroll behavior, for example to have full width maps than don't disrupt page scrolling.

The functionality is limited but allows you to quickly add a map with marker to any page. For most use cases this should be more than enough.

Features

  • Uses the latest Leaflet from CDN
  • You can customize map center, zoom, marker location and marker popup text
  • Only one marker possible at this time
  • Zoom control, zoom by scroll can be disabled until clicked on the map

Installation

Install the plugin directly from Composer

Type composer require josephcrowell/wn-leafletmap-plugin from the Winter CMS root directory and Composer will install the plugin

Download the plugin directly from Github

Unpack it to plugins/josephcrowell/leafletmap directory. Logout and login into the backend, and the plugin should be installed now.

Configuration

LeafletMap component settings

  • Latitude and Longitude - Coordinates for the map center separated by coma ie. 50.002, -0.09. Check Get OSM Coordinates chapter to learn how to find your coordinates.
  • Zoom – initial map zoom level. Should be a number.
  • Marker Latitude and Longitude – latitude and longitude in the same format like map center coordinates. If this field is left empty no marker will be shown.
  • Marker Text – A short description that will be displayed in a popup (when clicked on marker). It could be ie. address.
  • Scroll Protection – Lets you control zoom behavior. By default the zooming feature by scroll/mouse wheel is disabled until visitor clicks on the map.
  • Width and Height - Sets the width and height of the map container element

Usage

Add the component to your page and configure it. Add it to your page following the code:

{% component 'LeafletMap' %}

The leafletmap div needs to have height defined. This height must be valid css and is set to 500px by default. To change this value edit the height component option.

Getting OSM coordinates and zoom settings

To find your coordinates and desired zoom level go to OSM page find desired location on the map (using search or just moving through the map with your mouse). Double click on the desired location on the map. The map will center automatically on the selected location. Mouse scroll to set desired zoom level. When everything is set click on the Share icon on the right side of the screen. In the Geo URI check this string:

geo:41.6591,-4.7287?z=15

Paste the selected numbers to Component settings. The ?z=15 defines the zoom level (15 in the example). Alternatively you could just check the link bar of your browser:

map=15/41.6591/-4.7287

Contact

If you have any questions just ask!

You can contact us at:

wn-leafletmap-plugin's People

Contributors

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