Skip to content

GitLab

Commit 06a7fca4 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

first

parents
Show whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ 06a7fca4
/node_modules/
/bower_components/
\ No newline at end of file
.project 0 → 100644
View file @ 06a7fca4
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>leaflet-maptext-control</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.palantir.typescript.typeScriptBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.palantir.typescript.typeScriptNature</nature>
</natures>
</projectDescription>
README.md 0 → 100644
View file @ 06a7fca4
# leaflet-maptext-control
>
## Description
Position text notes onto the map
## Installation
### bower
`bower install https://git.smhi.se/stw/leaflet-maptext-control.git --save`
## Demo
## Usage
v;
m;
### options
### Methods
## Copyright and License
## Contact information
Tomas Pettersson tomas.pettersson@smhi.se
## Credits and acknowledgements
## Known bugs
## Troubleshooting
## Changelog
bower.json 0 → 100644
View file @ 06a7fca4
{
"name": "leaflet-maptext-control",
"version": "0.0.1",
"homepage": "https://git.smhi.se/stw/leaflet-maptext-control",
"authors": [
"Tomas Pettersson <tomas.pettersson@smhi.se>"
],
"description": "Position text notes onto the map",
"main": [
"src/leaflet-maptext-control.js"
],
"repository": {
"type": "git",
"url": "git@git.smhi.se:stw/leaflet-maptext-control.git"
},
"dependencies": {
"leaflet": "https://github.com/Leaflet/Leaflet.git#v1.0.0-beta.2"
},
"devDependencies": {},
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"moduleType": [
"es6"
]
}
src/leaflet-maptext-control.js 0 → 100644
View file @ 06a7fca4
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var L;
(function (L) {
var Control;
(function (Control) {
var MapText = (function (_super) {
__extends(MapText, _super);
function MapText(options) {
_super.call(this, options);
this.lang = "en";
if (options.lang) {
this.lang = options.lang.replace(/#/g, '');
}
if (options.langdata) {
this.langData = options.langdata;
}
if (options.dataurl) {
this.dataurl = options.dataurl;
}
}
MapText.prototype.onAdd = function (map) {
var self = this;
this.map = map;
this.container = L.DomUtil.create('div', 'maptext');
if (self.langData) {
self.addText(self.container);
}
else {
reqwest({
url: "lang/maptext." + self.lang + ".json",
method: 'get',
type: 'json',
success: function (lang) {
self.langData = lang;
self.addText(self.container);
}
});
}
return this.container;
};
MapText.prototype.addText = function (container) {
var self = this;
self.textDiv = L.DomUtil.create('div', 'maptext-control', container);
var textButton = L.DomUtil.create('button', 'textbutton', self.textDiv);
var textButtonImage = L.DomUtil.create('img', 'textimg', textButton);
textButtonImage.src = "images/maptext.png";
textButtonImage.width = 24;
textButtonImage.height = 18;
L.DomEvent.on(self.textDiv, 'click', L.DomEvent.stopPropagation);
L.DomEvent.on(self.textDiv, 'click', L.DomEvent.preventDefault);
L.DomEvent.on(self.textDiv, 'click', self.toggleText, this);
L.DomEvent.on(self.textDiv, 'dblclick', L.DomEvent.stopPropagation);
};
MapText.prototype.toggleText = function () {
this.addingText = !this.addingText;
if (this.addingText) {
L.DomUtil.addClass(this.container, 'maptext-adding-on');
this.startAddingText();
if (this.dataurl)
this.loadData();
}
else {
L.DomUtil.removeClass(this.container, 'maptext-adding-on');
if (this.dataurl)
this.saveData();
this.stopAddingText();
}
};
MapText.prototype.loadData = function () {
var self = this;
reqwest({
url: self.dataurl,
method: 'get',
type: 'json',
success: function (geojson) {
if (geojson && (geojson.type)) {
self.layerPaint.clearLayers();
self.layerPaint = L.geoJson(geojson, {
pointToLayer: function (featureData, latlng) {
return self.addMarker(latlng, featureData.properties.value, false);
}
});
if (!self.map.hasLayer(self.layerPaint))
self.layerPaint.addTo(self.map);
}
}
});
};
MapText.prototype.saveData = function () {
var self = this;
reqwest({
url: self.dataurl,
method: 'post',
data: JSON.stringify(self.layerPaint.toGeoJSON()),
success: function (resp) {
}
});
};
MapText.prototype.startAddingText = function () {
L.DomEvent.on(this.map, 'click', this.mouseClick, this);
if (!this.layerPaint) {
this.layerPaint = new L.GeoJSON(null, {});
this.layerPaint.addTo(this.map);
}
};
MapText.prototype.addMarker = function (latlng, textvalue, openPopup) {
var self = this;
var textIcon = L.divIcon({
className: 'maptext-icon',
iconSize: null,
html: textvalue,
iconAnchor: L.point(75, 0)
});
var marker = L.marker(latlng, {
draggable: true,
icon: textIcon,
zIndexOffset: 100000
});
var popupContent = L.DomUtil.create('div', 'maptext-popup');
marker.bindPopup(popupContent, { closeButton: false });
var textDiv = L.DomUtil.create('div', '', popupContent);
var text = L.DomUtil.create('textarea', '', textDiv);
text.rows = 4;
text.cols = 30;
text.placeholder = self.langData.tPlaceholder;
if (self.lang == 'arabic')
text.style.direction = 'rtl';
var buttonDiv = L.DomUtil.create('div', '', popupContent);
var add = L.DomUtil.create('button', '', buttonDiv);
add.appendChild(document.createTextNode(self.langData.bAdd));
var destroy = L.DomUtil.create('button', '', buttonDiv);
destroy.appendChild(document.createTextNode(self.langData.bRemove));
this.layerPaint.addLayer(marker);
if (openPopup)
marker.openPopup();
var remove = false;
add.onclick = function (e) {
var m = marker;
m._icon.innerHTML = text.value;
m.closePopup();
m.feature = {};
m.feature.type = 'Feature';
m.feature.properties = {
type: 'text',
value: text.value
};
if (self.dataurl)
self.saveData();
};
destroy.onclick = function (e) {
remove = true;
marker.closePopup();
};
marker.on('popupclose', function (e) {
var m = marker;
if (m._icon.innerHTML == '')
remove = true;
if (remove && self.addingText) {
self.layerPaint.removeLayer(marker);
}
});
return marker;
};
MapText.prototype.mouseClick = function (e) {
var self = this;
// Skip if no coordinates
if (!e.latlng) {
return;
}
self.addMarker(e.latlng, '', true);
};
MapText.prototype.stopAddingText = function () {
L.DomEvent.off(this.map, 'click', this.mouseClick, this);
if (this.layerPaint) {
this.layerPaint.clearLayers();
}
};
return MapText;
})(L.Control);
Control.MapText = MapText;
})(Control = L.Control || (L.Control = {}));
})(L || (L = {}));
src/leaflet-maptext-control.ts 0 → 100644
View file @ 06a7fca4
module L.Control {
export class MapText extends L.Control {
private container : HTMLElement;
private textDiv : HTMLDivElement;
private map : any;
private addingText : boolean;
private layerPaint : L.GeoJSON;
private lang : string;
private langData : any;
private dataurl : any;
constructor(options) {
super(options);
this.lang = "en";
if (options.lang) {
this.lang = options.lang.replace(/#/g, '');
}
if (options.langdata) {
this.langData = options.langdata;
}
if (options.dataurl) {
this.dataurl = options.dataurl;
}
}
public onAdd(map) {
var self = this;
this.map = map;
this.container = L.DomUtil.create('div', 'maptext');
if (self.langData) {
self.addText(self.container);
} else {
reqwest({
url: "lang/maptext."+self.lang+".json",
method: 'get',
type: 'json',
success: function (lang) {
self.langData = lang;
self.addText(self.container);
}
});
}
return this.container;
}
private addText(container) {
var self = this;
self.textDiv = <HTMLDivElement>L.DomUtil.create('div', 'maptext-control', container);
var textButton = <HTMLButtonElement>L.DomUtil.create('button', 'textbutton', self.textDiv);
var textButtonImage = <HTMLImageElement>L.DomUtil.create('img', 'textimg', textButton);
textButtonImage.src = "images/maptext.png";
textButtonImage.width = 24;
textButtonImage.height = 18;
L.DomEvent.on(self.textDiv, 'click', L.DomEvent.stopPropagation);
L.DomEvent.on(self.textDiv, 'click', L.DomEvent.preventDefault);
L.DomEvent.on(self.textDiv, 'click', self.toggleText, this);
L.DomEvent.on(self.textDiv, 'dblclick', L.DomEvent.stopPropagation);
}
private toggleText() {
this.addingText = !this.addingText;
if (this.addingText) {
L.DomUtil.addClass(this.container, 'maptext-adding-on');
this.startAddingText();
if (this.dataurl) this.loadData();
} else {
L.DomUtil.removeClass(this.container, 'maptext-adding-on');
if (this.dataurl) this.saveData();
this.stopAddingText();
}
}
private loadData() {
var self = this;
reqwest({
url: self.dataurl,
method: 'get',
type: 'json',
success: function (geojson) {
if (geojson && (geojson.type)) {
self.layerPaint.clearLayers();
self.layerPaint = L.geoJson(geojson, {
pointToLayer: function(featureData, latlng) {
return self.addMarker(latlng, featureData.properties.value, false);
}
});
if (!self.map.hasLayer(self.layerPaint)) self.layerPaint.addTo(self.map);
}
}
});
}
private saveData() {
var self = this;
reqwest({
url: self.dataurl,
method: 'post',
data: JSON.stringify(self.layerPaint.toGeoJSON()),
success: function(resp) {
}
});
}
private startAddingText() {
L.DomEvent.on(this.map, 'click', this.mouseClick, this);
if(!this.layerPaint) {
this.layerPaint = new L.GeoJSON(null, {});
this.layerPaint.addTo(this.map);
}
}
private addMarker(latlng, textvalue, openPopup) {
var self = this;
var textIcon = L.divIcon({
className: 'maptext-icon',
iconSize: null,
html : textvalue,
iconAnchor : L.point(75, 0)
});
var marker = L.marker(latlng, {
draggable: true,
icon : textIcon,
zIndexOffset: 100000
});
var popupContent = <HTMLDivElement>L.DomUtil.create('div', 'maptext-popup');
marker.bindPopup(popupContent, {closeButton: false});
var textDiv = <HTMLDivElement>L.DomUtil.create('div', '', popupContent);
var text = <HTMLTextAreaElement>L.DomUtil.create('textarea', '', textDiv);
text.rows = 4;
text.cols = 30;
text.placeholder = self.langData.tPlaceholder;
if (self.lang == 'arabic') text.style.direction = 'rtl';
var buttonDiv = <HTMLDivElement>L.DomUtil.create('div', '', popupContent);
var add = <HTMLButtonElement>L.DomUtil.create('button', '', buttonDiv);
add.appendChild(document.createTextNode(self.langData.bAdd));
var destroy = <HTMLButtonElement>L.DomUtil.create('button', '', buttonDiv);
destroy.appendChild(document.createTextNode(self.langData.bRemove));
this.layerPaint.addLayer(marker);
if (openPopup) marker.openPopup();
var remove = false;
add.onclick = function(e) {
var m:any = marker
m._icon.innerHTML = text.value;
m.closePopup();
m.feature = {};
m.feature.type = 'Feature';
m.feature.properties = {
type : 'text',
value : text.value
};
if (self.dataurl) self.saveData();
};
destroy.onclick = function(e) {
remove = true;
marker.closePopup();
};
marker.on('popupclose', function(e) {
var m:any = marker
if ( m._icon.innerHTML == '') remove = true;
if (remove && self.addingText) {
self.layerPaint.removeLayer(marker);
}
});
return marker;
}
private mouseClick(e) {
var self = this;
// Skip if no coordinates
if(!e.latlng) {
return;
}
self.addMarker(e.latlng, '', true);
}
private stopAddingText() {
L.DomEvent.off(this.map, 'click', this.mouseClick, this);
if(this.layerPaint) {
this.layerPaint.clearLayers();
}
}
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment