Skip to content

Latest commit

 

History

History
33 lines (26 loc) · 2.3 KB

README.md

File metadata and controls

33 lines (26 loc) · 2.3 KB
Raw

OSM Website Widget

OSM Logo
Insert a custom Open Street Map (OSM) widget map pointing to a specified location in just 3 min !
You don't need to code anything, neither to be a great designer : simply copy-paste these little pieces of code at the specified place 😋 You'll just need to create a MapBox account to use great background design. It's free and Open Source, perfect for a Contact Page, a Column or Widget... !

/// What you need

Displayed marker's GPS Coordinates

  1. Use OSM to find the coordinates,
  2. Replace [XXX-LATITUDE-XXX, XXX-LONGITUDE-XXX] inside javascript_part.js file with your coordinates → example : [53.266803,-9.046916]

Map Center's GPS Coordinates

Same method. Obviously, you can use the same coordinates as your marker. Then, replace [XXX-LATITUDE-CENTER-XXX, XXX-LONGITUDE-CENTER-XXX] inside javascript_part.js code.

MapBox background

  1. Create an account on MapBox website : https://www.mapbox.com
  2. Get your individual Access Token : "Account" > Tab "API access token" in the upper right menu > click on "Default Public Token" to show your Access Token
  3. Replace XXX-YOUR-MAPBOX-ACCESS-TOKEN-XXX inside javascript_part.js code.
  4. Choose the type of background you want to use for your widget : light / dark / streets / outdoors / satellite... and set id: 'mapbox.streets' inside javascript_part.js code.

/// How it works

  1. Insert head_part.html code inside the <head></head> Tags of your website. Thanks to keep credit's mentions 😄
  2. Insert css_part.css code into <style></style> Tags inside <head></head> Tags just after head_part.html code,
  3. Insert body_part.html where you want to display your map,
  4. Insert javascript_part.js inside <script></script> Tags, just after body_part.html,
  5. Brew a delicious tea 🍵 & enjoy !

/// Credits

(CC-BY) Creative Commons Attribution https://creativecommons.org/licenses/by/2.0/fr/
Guillaume ROUAN | 2016
💬 Github/Twitter : @grouan | http://guillaume-rouan.net