SpeechBubble for direction
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist fix pinch bug Apr 4, 2018
examples First Commit Sep 8, 2017
src fix pinch bug Apr 4, 2018
.gitignore first build Sep 8, 2017
Changelog.md fixed layer management. Sep 12, 2017
README.md README.md Sep 8, 2017
gulpfile.js first build Sep 8, 2017
package-lock.json fix pinch bug Apr 4, 2018
package.json 1.0.2 Sep 11, 2017

README.md

Leaflet.SpeechBubble

SpeechBubble for direction

demo

https://sybri.github.io/demo/Leaflet.SpeechBubble/demo.html

Usage

Include L.SpeechBubble.js

    <script src="https://unpkg.com/leaflet-speechbubble@1.0.0/dist/L.SpeechBubble.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-speechbubble@1.0.0/dist/SpeechBubble.css" /> 

Simple initialization

 var SpeechBubble = new L.SpeechBubble({
     	background: "#FFF",
		borderThick: 2,
		borderColor: "#000",
    },[51.5, -0.09]).addTo(mymap);

Initialize with options and bind to a marker

    var marker = L.marker([51.5, -0.09]).addTo(mymap);
		var options={
			width: 100, //size of main popup
			height: 100, //size of main popup
			top: 20, //top offset of main popup from map
			left: 200, //left offset of main popup from map
			strenth: 50, //length of the arrow
			base: 10,   // width of the base of arrow
			angle:0,    //dyn value don't care
			background: "#FF0", //background color of the speechBublle
			borderThick: 1, // the thickness of the borders' speechbubble
			borderColor: "#0F0",    // color of the border
			borderRadius: 10    // radius for border
		};
		marker.bindSpeechBubble("<b>Hello world!</b><br>I am a speechbubble.",options).openSpeechBubble();