add map for creating and editing of Character groups Quest Stations

This commit is contained in:
oliver 2016-01-15 10:26:17 +01:00
parent 33e1c4d8b5
commit b7ce9f09cd
3 changed files with 123 additions and 0 deletions

View file

@ -250,6 +250,8 @@
$validation = $this->Validation->addValidationResult($validation, 'title', 'exist', true);
}
$task = $this->request->getPostParam('task');
$longitude = $this->request->getPostParam('longitude');
$latitude = $this->request->getPostParam('latitude');
$rightText = $this->request->getPostParam('rightText');
$wrongText = $this->request->getPostParam('wrongText');
@ -418,6 +420,8 @@
$validation = $this->Validation->addValidationResult($validation, 'title', 'exist', true);
}
$task = $this->request->getPostParam('task');
$longitude = $this->request->getPostParam('longitude');
$latitude = $this->request->getPostParam('latitude');
$rightText = $this->request->getPostParam('rightText');
$wrongText = $this->request->getPostParam('wrongText');

View file

@ -60,6 +60,9 @@
</fieldset>
<fieldset>
<legend><?=_('Location')?></legend>
<div id="map" class="map"></div>
<input id="longitude" name="longitude" type="hidden" value="<?=$longitude?>" />
<input id="latitude" name="latitude" type="hidden" value="<?=$latitude?>" />
</fieldset>
<fieldset>
<label for="stationtype"><?=('Stationtype')?>:</label>
@ -96,4 +99,54 @@
$("#rightText").markItUp(mySettings);
$("#wrongText").markItUp(mySettings);
});
var drawSource = new ol.source.Vector({
wrapX: false
});
var drawLayer = new ol.layer.Vector({
source: drawSource,
style: new ol.style.Style({
text: new ol.style.Text({
//text: '\uf041',
text: '\uf276',
font: 'normal 28px FontAwesome',
textBaseline: 'Bottom',
fill: new ol.style.Fill({
color: '#0F373C'
})
})
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
drawLayer
],
controls: ol.control.defaults(),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 0,
maxZoom: 19
})
});
var draw = new ol.interaction.Draw({
source: drawSource,
type: 'Point',
maxPoints: 1,
});
map.addInteraction(draw);
// Wire events
drawSource.on('addfeature', function(event) {
var coordinates = event.feature.getGeometry().getCoordinates();
coordinates = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
$('#longitude').val(coordinates[0]);
$('#latitude').val(coordinates[1]);
});
draw.on('drawstart', function() {
drawSource.clear();
});
</script>

View file

@ -60,6 +60,9 @@
</fieldset>
<fieldset>
<legend><?=_('Location')?></legend>
<div id="map" class="map"></div>
<input id="longitude" name="longitude" type="hidden" value="<?=$longitude?>" />
<input id="latitude" name="latitude" type="hidden" value="<?=$latitude?>" />
</fieldset>
<fieldset>
<label for="stationtype"><?=('Stationtype')?>:</label>
@ -96,4 +99,67 @@
$("#rightText").markItUp(mySettings);
$("#wrongText").markItUp(mySettings);
});
var drawSource = new ol.source.Vector({
wrapX: false
});
var drawLayer = new ol.layer.Vector({
source: drawSource,
style: new ol.style.Style({
text: new ol.style.Text({
//text: '\uf041',
text: '\uf276',
font: 'normal 28px FontAwesome',
textBaseline: 'Bottom',
fill: new ol.style.Fill({
color: '#0F373C'
})
})
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
drawLayer
],
controls: ol.control.defaults(),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 0,
maxZoom: 19
})
});
var draw = new ol.interaction.Draw({
source: drawSource,
type: 'Point',
maxPoints: 1,
});
map.addInteraction(draw);
// Add existing point
var longitude = $('#longitude').val();
var latitude = $('#latitude').val();
if(longitude && latitude) {
drawSource.addFeature(
new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857')
)
})
);
}
// Wire events
drawSource.on('addfeature', function(event) {
var coordinates = event.feature.getGeometry().getCoordinates();
coordinates = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
$('#longitude').val(coordinates[0]);
$('#latitude').val(coordinates[1]);
});
draw.on('drawstart', function() {
drawSource.clear();
});
</script>