i want to add shapefile to the map from the folder. i have used JS sample code but it does not work for me.it gives error in response , featurecollection . it doesnot got into request block so i change it to esri request but still code not working
var portalUrl = "https://www.arcgis.com";
esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dojo.byId("uploadForm"), "change", function (event) {
var fileName = event.target.value.toLowerCase();
<!-- if (sniff("ie")) { //filename is full path in IE so extract the file name -->
<!-- var arr = fileName.split("\\"); -->
<!-- fileName = arr[arr.length - 1]; -->
<!-- } -->
if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user
generateFeatureCollection(fileName);
}
else {
alert("Add shapefile as .zip file");
}
});
function generateFeatureCollection (fileName) {
var name = fileName.split(".");
name = name[0].replace("c:\\fakepath\\", "");
var params = {
'name': name,
'targetSR': map.spatialReference,
'maxRecordCount': 1000,
'enforceInputFileSizeLimit': true,
'enforceOutputJsonSizeLimit': true
};
//var extent = scaleUtils.getExtentForScale(map, 40000);
var extent = esri.geometry.getExtentForScale(map, 40000);
var resolution = extent.getWidth() / map.width;
params.generalize = true;
params.maxAllowableOffset = resolution;
params.reducePrecision = true;
params.numberOfDigitsAfterDecimal = 0;
var myContent = {
'filetype': 'shapefile',
'publishParameters': JSON.stringify(params),
'f': 'json',
//'callback.html': 'textarea'
};
esriRequest({
url: portalUrl + '/sharing/rest/content/features/generate',
content: myContent,
form: dojo.byId('uploadForm'),
handleAs: 'json',
load: lang.hitch(this, function (response) {
<!-- if (response.error) { -->
<!-- errorHandler(response.error); -->
<!-- return; -->
<!-- } -->
var layerName = response.FeatureCollection.layers[0].layerDefinition.name;
addShapefileToMap(response.FeatureCollection);
}),
//error: lang.hitch(this, errorHandler)
});
}
function addShapefileToMap (featureCollection) {
var fullExtent;
var layers = [];
arrayUtils.forEach(featureCollection.layers, function (layer) {
var infoTemplate = new InfoTemplate("Details", "${*}");
var featureLayer = new FeatureLayer(layer, {
infoTemplate: infoTemplate
});
featureLayer.on('click', function (event) {
map.infoWindow.setFeatures([event.graphic]);
});
changeRenderer(featureLayer);
fullExtent = fullExtent ?
fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;
layers.push(featureLayer);
});
map.addLayers(layers);
map.setExtent(fullExtent.expand(1.25), true);
}
function changeRenderer (layer) {
//change the default symbol for the feature collection for polygons and points
var symbol = null;
switch (layer.geometryType) {
case 'esriGeometryPoint':
symbol = new PictureMarkerSymbol({
'angle': 0,
'xoffset': 0,
'yoffset': 0,
'type': 'esriPMS',
'url': 'https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png',
'contentType': 'image/png',
'width': 20,
'height': 20
});
break;
case 'esriGeometryPolygon':
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25]));
break;
}
if (symbol) {
layer.setRenderer(new SimpleRenderer(symbol));
}
}
Well, I went through your jsfiddle and atteched code, I observed few items is missing in it-
important links and js libraries.
dojo /esri component require
map element to display shapefile
map control html to load map element.
Below is the working code(try this)-
var map;
require([
"esri/config",
"esri/InfoTemplate",
"esri/map",
"esri/request",
"esri/geometry/scaleUtils",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/json",
"dojo/on",
"dojo/parser",
"dojo/sniff",
"dojo/_base/array",
"esri/Color",
"dojo/_base/lang",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
esriConfig, InfoTemplate, Map, request, scaleUtils, FeatureLayer,
SimpleRenderer, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol,
dom, JSON, on, parser, sniff, arrayUtils, Color, lang
) {
parser.parse();
var portalUrl = "https://www.arcgis.com";
esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dojo.byId("uploadForm"), "change", function (event) {
var fileName = event.target.value.toLowerCase();
<!-- if (sniff("ie")) { //filename is full path in IE so extract the file name -->
<!-- var arr = fileName.split("\\"); -->
<!-- fileName = arr[arr.length - 1]; -->
<!-- } -->
if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user
generateFeatureCollection(fileName);
}
else {
alert("Add shapefile as .zip file");
}
});
map = new Map("mapCanvas", {
basemap: "gray",
center: [-41.647, 36.41],
zoom: 3,
slider: false
});
function generateFeatureCollection (fileName) {
var name = fileName.split(".");
name = name[0].replace("c:\\fakepath\\", "");
var params = {
'name': name,
'targetSR': map.spatialReference,
'maxRecordCount': 1000,
'enforceInputFileSizeLimit': true,
'enforceOutputJsonSizeLimit': true
};
//var extent = scaleUtils.getExtentForScale(map, 40000);
var extent = esri.geometry.getExtentForScale(map, 40000);
var resolution = extent.getWidth() / map.width;
params.generalize = true;
params.maxAllowableOffset = resolution;
params.reducePrecision = true;
params.numberOfDigitsAfterDecimal = 0;
var myContent = {
'filetype': 'shapefile',
'publishParameters': json.stringify(params),
'f': 'json',
'callback.html': 'textarea'
};
esriRequest({
url: portalUrl + '/sharing/rest/content/features/generate',
content: myContent,
form: dojo.byId('uploadForm'),
handleAs: 'json',
load: lang.hitch(this, function (response) {
if (response.error) {
errorHandler(response.error);
return;
}
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
var layerName = response.featureCollection.layers[0].layerDefinition.name;
addShapefileToMap(response.featureCollection);
}),
//error: lang.hitch(this, errorHandler)
});
}
function addShapefileToMap (featureCollection) {
var fullExtent;
var layers = [];
array.forEach(featureCollection.layers, function (layer) {
//for(var i = 0 ; i<=featureCollection.layers.length ; i++){
//featureCollection.layers.forEach(function(layer){
var infoTemplate = new InfoTemplate("Details", "${*}");
var featureLayer = new FeatureLayer(layer, {
infoTemplate: infoTemplate
});
featureLayer.on('click', function (event) {
map.infoWindow.setFeatures([event.graphic]);
});
changeRenderer(featureLayer);
fullExtent = fullExtent ?
fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;
layers.push(featureLayer);
});
map.addLayers(layers);
map.setExtent(fullExtent.expand(1.25), true);
}
function changeRenderer (layer) {
//change the default symbol for the feature collection for polygons and points
var symbol = null;
switch (layer.geometryType) {
case 'esriGeometryPoint':
symbol = new PictureMarkerSymbol({
'angle': 0,
'xoffset': 0,
'yoffset': 0,
'type': 'esriPMS',
'url': 'https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png',
'contentType': 'image/png',
'width': 20,
'height': 20
});
break;
case 'esriGeometryPolygon':
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25]));
break;
}
if (symbol) {
layer.setRenderer(new SimpleRenderer(symbol));
}
}
});
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/fileupload.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<form enctype="multipart/form-data" method="post" id="uploadForm">
<div class="field">
<label class="file-upload">
<!-- <span><strong>Choose File</strong></span> -->
<!-- <span align = "center"><Add Shapefile></span> -->
<Label style="font-weight: bold; align = center ">Add Shapefile</label><br></br>
<input type="file" name="file" id="inFile" />
</label>
</div>
</form>
<span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
<div id="fileInfo"> </div>
</div>
</div>
<div id="mapCanvas" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
Updated JSFiddle- https://jsfiddle.net/vikash2402/f2hxt25d/4/
Note- If still its causing problem then share your shapefile.
Hoping this will help you.
Well, Tried to create another sample-
Here is the working example -
<!DOCTYPE HTML>
<title>Add Shapefile</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/portal_addshapefile/css/app.css">
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/portal_addshapefile/css/fileupload.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"esri/config",
"esri/InfoTemplate",
"esri/map",
"esri/request",
"esri/geometry/scaleUtils",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/json",
"dojo/on",
"dojo/parser",
"dojo/sniff",
"dojo/_base/array",
"esri/Color",
"dojo/_base/lang",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
esriConfig, InfoTemplate, Map, request, scaleUtils, FeatureLayer,
SimpleRenderer, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol,
dom, JSON, on, parser, sniff, arrayUtils, Color, lang
) {
parser.parse();
var portalUrl = "https://www.arcgis.com";
//esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dom.byId("uploadForm"), "change", function (event) {
var fileName = event.target.value.toLowerCase();
if (sniff("ie")) { //filename is full path in IE so extract the file name
var arr = fileName.split("\\");
fileName = arr[arr.length - 1];
}
if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user
generateFeatureCollection(fileName);
}
else {
dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
}
});
map = new Map("mapCanvas", {
basemap: "gray",
center: [-41.647, 36.41],
zoom: 3,
slider: false
});
function generateFeatureCollection (fileName) {
var name = fileName.split(".");
//Chrome and IE add c:\fakepath to the value - we need to remove it
//See this link for more info: http://davidwalsh.name/fakepath
name = name[0].replace("c:\\fakepath\\", "");
dom.byId('upload-status').innerHTML = '<b>Loading… </b>' + name;
//Define the input params for generate see the rest doc for details
//http://www.arcgis.com/apidocs/rest/index.html?generate.html
var params = {
'name': name,
'targetSR': map.spatialReference,
'maxRecordCount': 1000,
'enforceInputFileSizeLimit': true,
'enforceOutputJsonSizeLimit': true
};
//generalize features for display Here we generalize at 1:40,000 which is approx 10 meters
//This should work well when using web mercator.
var extent = scaleUtils.getExtentForScale(map, 40000);
var resolution = extent.getWidth() / map.width;
params.generalize = true;
params.maxAllowableOffset = resolution;
params.reducePrecision = true;
params.numberOfDigitsAfterDecimal = 0;
var myContent = {
'filetype': 'shapefile',
'publishParameters': JSON.stringify(params),
'f': 'json',
'callback.html': 'textarea'
};
//use the rest generate operation to generate a feature collection from the zipped shapefile
request({
url: portalUrl + '/sharing/rest/content/features/generate',
content: myContent,
form: dom.byId('uploadForm'),
handleAs: 'json',
load: lang.hitch(this, function (response) {
if (response.error) {
errorHandler(response.error);
return;
}
var layerName = response.featureCollection.layers[0].layerDefinition.name;
dom.byId('upload-status').innerHTML = '<b>Loaded: </b>' + layerName;
addShapefileToMap(response.featureCollection);
}),
error: lang.hitch(this, errorHandler)
});
}
function errorHandler (error) {
dom.byId('upload-status').innerHTML =
"<p style='color:red'>" + error.message + "</p>";
}
function addShapefileToMap (featureCollection) {
//add the shapefile to the map and zoom to the feature collection extent
//If you want to persist the feature collection when you reload browser you could store the collection in
//local storage by serializing the layer using featureLayer.toJson() see the 'Feature Collection in Local Storage' sample
//for an example of how to work with local storage.
var fullExtent;
var layers = [];
arrayUtils.forEach(featureCollection.layers, function (layer) {
var infoTemplate = new InfoTemplate("Details", "${*}");
var featureLayer = new FeatureLayer(layer, {
infoTemplate: infoTemplate
});
//associate the feature with the popup on click to enable highlight and zoom to
featureLayer.on('click', function (event) {
map.infoWindow.setFeatures([event.graphic]);
});
//change default symbol if desired. Comment this out and the layer will draw with the default symbology
changeRenderer(featureLayer);
fullExtent = fullExtent ?
fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;
layers.push(featureLayer);
});
map.addLayers(layers);
map.setExtent(fullExtent.expand(1.25), true);
dom.byId('upload-status').innerHTML = "";
}
function changeRenderer (layer) {
//change the default symbol for the feature collection for polygons and points
var symbol = null;
switch (layer.geometryType) {
case 'esriGeometryPoint':
symbol = new PictureMarkerSymbol({
'angle': 0,
'xoffset': 0,
'yoffset': 0,
'type': 'esriPMS',
'url': 'https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png',
'contentType': 'image/png',
'width': 20,
'height': 20
});
break;
case 'esriGeometryPolygon':
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25]));
break;
}
if (symbol) {
layer.setRenderer(new SimpleRenderer(symbol));
}
}
});
</script>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="rightPane" data-dojo-props="region:'right'">
<div style='padding-left:4px;'>
<p>
Add a zipped shapefile to the map.</p><p>Visit the
<a target='_blank' href="https://doc.arcgis.com/en/arcgis-online/reference/shapefiles.htm">Shapefiles</a> help topic for information and limitations.</p>
<form enctype="multipart/form-data" method="post" id="uploadForm">
<div class="field">
<label class="file-upload">
<span><strong>Add File</strong></span>
<input type="file" name="file" id="inFile" />
</label>
</div>
</form>
<span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
<div id="fileInfo"> </div>
</div>
</div>
<div id="mapCanvas" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
Updated JSFiddle Link-https://jsfiddle.net/vikash2402/Lrsrdojh/2/
I tried with with following Shapefile-
Source:- https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=portal_addshapefile
Hoping this will finally solve your issue!
Related
I am using RTKLIB feature RTKPLOT. Google map is not enabled in it because it requires API key. I inserted google map API key in given htm file but a blank screen is shown while showing coordinates. The header part of htm file is first like this
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
After that i replaced it for inserting API key as follows.
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
->
<script src="http://maps.google.com/maps/api/js?key={XXXXXXXXXXXXXXXXXXXXXXXXXXXXX_XXXXXXXXX}&v=3&sensor=false"
tell me where I am wrong .
complete code is
<html>
<head>
<title>RTKLIB_GM</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var map = null;
var marks = [];
var markh = null;
var markz = 0;
var info = null;
var icon0="http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png";
var icon1="http://maps.google.co.jp/mapfiles/ms/icons/yellow-dot.png";
function init() {
var opt = {
center: new google.maps.LatLng(0,0),
zoom: 2, minZoom: 2,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
document.getElementById('state').value='1';
}
function SetView(lat,lon,zoom) {
if (map == null) return;
map.setCenter(new google.maps.LatLng(lat,lon));
map.setZoom(zoom);
}
function SetCent(lat,lon) {
if (map == null) return;
map.setCenter(new google.maps.LatLng(lat,lon));
}
function SetZoom(zoom) {
if (map == null) return;
map.setZoom(zoom);
}
function ClearMark(lat,lon,title) {
for (var i in marks) {
marks[i].setMap(null);
}
marks.length = 0;
markh = null;
}
function AddMark(lat,lon,title,msg) {
var pos = new google.maps.LatLng(lat,lon);
var opt = {map: map, position: pos, title: title, icon: icon1};
var mark = new google.maps.Marker(opt);
if (title == "SOL2") mark.setIcon(icon0);
google.maps.event.addListener(mark,'click',function(event) {
if (info) {info.close();}
info = new google.maps.InfoWindow({content: msg});
info.open(mark.getMap(),mark);
});
marks.push(mark);
}
function PosMark(lat,lon,title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setPosition(new google.maps.LatLng(lat,lon));
break;
}
}
}
function ShowMark(title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setVisible(true);
break;
}
}
}
function HideMark(title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setVisible(false);
break;
}
}
}
</script>
</head>
<body style="margin: 0;"; scroll="no"; onload="init()">
<div id="map" style="height: 100%; width: 100%;"> </div>
<input id="state" type="hidden" value="0">
</body>
</html>
Assuming you are on Windows. You need to add a register key for the software to work.
Add the following entry of Windows registries by regedit (Registry Editor) to run the WebBrowser component on RTKPlot.exe as IE 11.
Key: KEY_LOCAL_MACHINE - SOFTWARE - Wow6432Node - Microsoft - Internet Explorer - MAIN - FeatureControl - FEATURE_BROWSER_EMULATION
Name: rtkplot.exe
Type: REG_DWORD
Data: 11000 (decimal)
http://www.rtklib.com/rtklib_support.htm - the same issue exists for NTRIP Browser (srctblbrows.exe)
This made it work on my machine, I had the same issue you had.
I have a calendar, and outside of this I have a box where I put the event values (client, barber, service and I choose a color). After loading the values, an element is generated that I can select and drag to the calendar. The following happens to me:
When I create an event and drag it to the calendar, it is placed with the color that I configured. If I click the save button, it loads correctly into the database. A json is saved with the event information, for example:
{"id":2,"title":"Maria Marco","barbero":"Diego","servicio":"Corte","start":"2020-03-21T10:30:00","end":"2020-03-21T11:00:00","color":"rgb(0, 86, 179)"}
Suppose I don't have any items in the database, and I create 3 events and drag them to the calendar. If I click the save button, these 3 will be saved correctly as indicated above.
Now if I do a new event load, these new elements will load correctly, but in the previous elements the color property now disappears.
I appreciate if any find the error in this spaghetti of js
$(function() {
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
// initialize the external events
// -----------------------------------------------------------------
new FullCalendarInteraction.Draggable(containerEl, {
itemSelector: '.external-event',
eventData: function(eventEl) {
var barbero = $("#barbero").children(".opcion-barbero:selected").html()
var servicio = $("#servicio").val()
return {
title: eventEl.innerText,
extendedProps: { "barbero": barbero, "servicio": servicio, "color": eventEl.style.backgroundColor },
backgroundColor: eventEl.style.backgroundColor,
borderColor: eventEl.style.backgroundColor
};
}
});
view = 'timeGridDay';
header = {
left: 'prev,next timeGridDay,timeGridWeek,dayGridMonth',
center: '',
right: ''
};
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'local',
plugins: ['interaction', 'dayGrid', 'timeGrid'],
eventSources: [
// your event source
{
url: 'ajax/turnos2.ajax.php'
}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(info) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
});
calendar.render();
/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default
//Color chooser button
var colorChooser = $('#color-chooser-btn')
$('#color-chooser > li > a').click(function(e) {
e.preventDefault()
//Save color
currColor = $(this).css('color')
//Add color effect to button
$('#add-new-event').css({
'background-color': currColor,
'border-color': currColor
})
})
$('#add-new-event').click(function(e) {
e.preventDefault()
//Get value and make sure it is not null
var val = $('#new-event').val()
if (val.length == 0) {
return
}
//Create events
var event = $('<div />')
event.css({
'font-weight': 300,
'background-color': currColor,
'border-color': currColor,
'color': '#fff'
}).addClass('external-event')
event.html(val)
$('#external-events').prepend(event)
//Add draggable funtionality
ini_events(event)
//Remove event from text input
$('#new-event').val('')
})
/*==============================================
Apply changes to the events
==============================================*/
$(document).on("click", "span.guardarCalendario", function() {
var arrayEventos = new Array();
var eventos = calendar.getEvents();
// Contador para ID
var num = 1;
eventos.forEach(e => {
// Nombre del turno
title = (e._def["title"]);
barbero2 = (e._def.extendedProps["barbero"]);
servicio = (e._def.extendedProps["servicio"]);
color = (e._def.extendedProps["color"]);
id = num;
num = num + 1;
var evento = new Object();
evento["id"] = id;
evento["title"] = title;
evento["barbero"] = barbero2;
evento["servicio"] = servicio;
evento["start"] = start;
evento["end"] = end;
evento["color"] = (e._def.extendedProps["color"]);
arrayEventos.push(evento);
})
$("#turnos").val(JSON.stringify(arrayEventos))
var data = { 'data': JSON.stringify(arrayEventos) }
$.ajax({
type: 'POST',
url: 'ajax/turnos.ajax.php',
dataType: 'json',
data: data,
success: function(data, status, xhr) {
alert("response was " + data);
},
error: function(xhr, status, errorMessage) {
$("#debug").append("RESPONSE: " + xhr.responseText + ", error: " + errorMessage);
}
});
})
turnos.ajax.php
<?php
require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";
class AjaxTurnos{
public $data;
public function ajaxActualizarTurnos(){
$datos = ($this->data);
foreach(json_decode($datos) as $value){
$respuesta = ModeloTurnos::mdlActualizarTurnos(json_encode($value).PHP_EOL);
}
return $respuesta;
}
}
/*==============================
ACTUALIZAR TURNOS
==============================*/
if(isset($_POST["data"])){
ModeloTurnos::mdlTruncarTurnos();
$turnos = new AjaxTurnos();
$turnos -> data = $_POST["data"];
$turnos -> ajaxActualizarTurnos();
}
turnos2.ajax.php
<?php
require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";
$data = ControladorTurnos::ctrMostrarTurnos();
$data2 = [];
foreach($data as $key=>$value){
$data2[] = json_decode($value["datos"]);
}
//returns data as JSON format
echo (json_encode($data2));
I have some issues with a Javascript and OpenLayers.
My code looks likes this at the moment:
<!-- OpenLayers Example -->
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Example</title>
<!-- Styles for example -->
<link rel="stylesheet" href="https://playground.fmeserver.com/css/FMEServerExamples.css" type="text/css" />
<!-- Include FMEServer.js -->
<script type="text/javascript" src="https://api.fmeserver.com/js/v3/FMEServer.js"></script>
<!-- The following are Required for OpenLayers -->
<script type="text/javascript" src="https://openlayers.org/api/OpenLayers.js"></script>
<!--Open Layers-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
#map {
width: 1500px;
height: 800px;
border: 1px solid black;
}
</style>
</head>
<body>
<h4>This example clips data to a user drawn polygon.</h4>
<form id="exampleForm">
<label><b>Step 1</b> - Draw the Polygon (Double Click to Close): </label>
<input id="draw" type="button" value="Draw" />
<input id="reset" type="button" value="Reset" /><br />
<div id="map" class="map"></div>
<label><b>Step 2</b> - Submit the Request to FME Server: </label>
<input type="button" onclick="processClip();" value="Clip Data To Area" />
</form>
<script type="text/javascript">
var drawControl, mouseControl, polygonLayer, map;
var clippingGeometry = [];
window.onload = function() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.974044, 57.708682]),
zoom: 12
})
});
// Lager från Geoserver
var Geoserver_WMS = new ol.layer.Tile({
title: "Test Geoserver",
source: new ol.source.TileWMS({
url: '*URLGoesHere*',
params: {
'LAYERS': '*LayerGoesHere*', 'TILED': true,
'STYLES': ''
},
serverType: 'geoserver',
projection: ol.proj.get('EPSG:3007'),
})
});
map.addLayer(Geoserver_WMS);
document.getElementById( "draw" ).setAttribute( "onclick", "drawPolygon();" );
document.getElementById( "reset" ).setAttribute( "onclick", "drawReset();" );
FMEServer.init({
server : "https://demos-safe-software.fmecloud.com",
token : "568c604bc1f235bbe137c514e7c61a8436043070"
});
};
function drawPolygon() {
drawReset();
polygonLayer = new OpenLayers.Layer.Vector( "Polygon Layer" );
mouseControl = new OpenLayers.Control.MousePosition();
map.addLayer( polygonLayer );
map.addControl( mouseControl );
drawControl = new OpenLayers.Control.DrawFeature( polygonLayer,
OpenLayers.Handler.Polygon );
map.addControl( drawControl );
drawControl.activate();
}
function drawReset() {
if( drawControl ) {
map.removeLayer( polygonLayer );
polygonLayer = null;
mouseControl.deactivate();
mouseControl = null;
drawControl.deactivate();
drawControl = null;
clippingGeometry = [];
}
}
function extractShape() {
if( polygonLayer.features[0] ) {
var vertices = polygonLayer.features[0].geometry.getVertices();
for( var i = 0; i < vertices.length; i++ ) {
var point = vertices[i].transform( toProjection, fromProjection );
clippingGeometry.push( [ point.x, point.y ] );
}
clippingGeometry.push( clippingGeometry[0] );
return true;
}
return false;
}
function showResults( json ) {
// The following is to write out the full return object
// for visualization of the example
var hr = document.createElement( "hr" );
var div = document.createElement( "div" );
// This extracts the download link to the clipped data
var download = json.serviceResponse.url;
div.innerHTML = "<h4>Return Object:</h4><pre>"+JSON.stringify(json, undefined, 4)+"</pre>";
div.innerHTML += "<hr>Download Result";
document.body.appendChild( hr );
document.body.appendChild( div );
}
function processClip() {
var repository = "REST-Playground";
var workspace = "WKTClip.fmw";
if( extractShape() ) {
// Process the clippingGeometry into a WKT Polygon string
var geometry = "POLYGON((";
for( var i = 0; i < clippingGeometry.length; i++ ) {
var lat = clippingGeometry[i][1];
var lng = clippingGeometry[i][0];
geometry += lng+" "+lat+",";
}
// Remove trailing , from string
geometry = geometry.substr( 0, geometry.length - 1 );
geometry += "))";
// Set the parameters for the Data Download Service (ESRI Shapefile Format)
// FORMAT OPTIONS: ACAD, SHAPE, GML, OGCKML
var params = "GEOM="+geometry+"&FORMAT=SHAPE";
// Use the FME Server Data Download Service
FMEServer.runDataDownload( repository, workspace, params, showResults );
}
}
</script>
</body>
</html>
When I hit "Draw" i get the following Error-message:
Uncaught TypeError: Cannot read property 'addLayer' of undefined
I´m supposed to get coordinates and be able to draw a polygon. But it won´t work.
Can anyone see whats wrong in the code? I just can't figure it out, and it drives me crazy.
Very thankfull for any suggestions.
You have a globally scope map variable and a local scoped one, with your code the was it is, you're never setting the globally scoped variable to a value so it's always undefined. Hence the error message
Change the code here
window.onload = function() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.974044, 57.708682]),
zoom: 12
})
});
And remove the var
window.onload = function() {
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.974044, 57.708682]),
zoom: 12
})
});
I have 2 plugins that I want to work together: Leaflet Tag Filter Button made by maydemirx and MarkerCluster.LayerSupport made by ghybs (both awesome people and plugins btw). What I want to happen is when I click a filter on the tag filter button, I would like the marker clusters to update based on the new filter (like this). So a cluster of 5 points becomes 2, or a cluster of 10 becomes 1 marker. I succeeded in adding the layerSupported cluster to my map, so there's no hiccup there. I am unsure, though, how to integrate the supported cluster with the tag filter buttons, as they are two separate entities.
The Leaflet Tag Filter Button does support an update() method and an enablePruneCluster method, both of which sound like they could be used to achieve what I'm looking for. Yet, when I apply them individually to the filter buttons, they don't work. I'm either applying the filter button methods incorrectly, creating the layerSupported cluster inaccurately, and/or the plugins were not made to be compatible with each other.
Here is my code for generating the layer supported marker cluster group:
var clusters = L.markerClusterGroup.layerSupport({maxClusterRadius:75}),
group1 = L.layerGroup();
var getjson = $.getJSON("map-v2.geojson",function(data){
var bev = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng, { tags: feature.properties.Genres.concat(feature.properties.Creator)});
marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<br/><img src="' + feature.properties.Thumbnail_URL + '"/><br/>' + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator, {minWidth : 250});
return marker;
}
});
bev.addTo(group1);
clusters.addLayer(group1);
map.addLayer(clusters);
});
// Here is where I add the layer supported clusters to the map.
clusters.checkIn(group1);
clusters.addTo(map);
Here is the section where I generate the tag filter buttons:
// Here is the code block for the Tag Filter Button. I start by accessing a tags file that has the data that I use for filter options. I should note that the genres.addToRelated is not working (it is supposed to link the 2 buttons together to work in conjunction with each other).
$.getJSON('tags.json', function(data) {
var genres = L.control.tagFilterButton({
data: data.genres,
filterOnEveryClick: true,
icon: '<i class="fas fa-tags"></i>',
}).addTo(map);
var creators = L.control.tagFilterButton({
data: data.creators,
filterOnEveryClick: true,
icon: '<i class="fas fa-user-edit"></i>',
}).addTo(map);
jQuery('.easy-button-button').click(function() {
target = jQuery('.easy-button-button').not(this);
target.parent().find('.tag-filter-tags-container').css({
'display' : 'none',
});
});
genres.addToRelated(creators);
genres.update(clusters);
genres.enablePruneCluster(clusters);
});
If you'd like to see it all in action, here is a plunker of the code.
Strangely the Leaflet Tag Filter Button plugin and/or latest Leaflet version look to have some bugs / listeners that may pause the script (hence the browser) when the Web Console is open.
Once those bugs are fixed, there are still bugs with the "addToReleated" method. Since I do not know what it is supposed to do, I will just ignore it for now, and let you possibly fix it with the plugin author.
As for integration with the Leaflet.markercluster plugin, it really does not look like the 1st plugin is supposed to support it. PruneCluster plugin (for which the enablePruneCluster method of Tag Filter Button is intended) works very differently from Leaflet.markercluster.
By having a look into the source code of Tag Filter Button, it seems that you could implement it by adapting the enablePruneCluster code and the hide function of the call to registerCustomSource in the default _prepareLayerSources. The idea is to avoid using directly the _map, and use an MCG instead.
Since you can directly handle calls to MCG addLayers and removeLayers within the hide function, there is really no need for the Leaflet.MarkerCluster.LayerSupport plugin at all.
Here is a quick and dirty implementation, called "enableMCG":
////////////////////////////////////////////////
// Quick and dirty implementation of enableMCG
////////////////////////////////////////////////
L.Control.TagFilterButton.include({
// Goal: read from MCG instead of from _map
enableMCG: function(mcgInstance) {
this.registerCustomSource({
name: 'mcg',
source: {
mcg: mcgInstance,
hide: function(layerSource) {
var releatedLayers = [];
for (
var r = 0; r < this._releatedFilterButtons.length; r++
) {
releatedLayers = releatedLayers.concat(
this._releatedFilterButtons[r].getInvisibles()
);
}
var toBeRemovedFromInvisibles = [],
i,
toAdd = [];
for (var i = 0; i < this._invisibles.length; i++) {
if (releatedLayers.indexOf(this._invisibles[i]) == -1) {
for (
var j = 0; j < this._invisibles[i].options.tags.length; j++
) {
if (
this._selectedTags.length == 0 ||
this._selectedTags.indexOf(
this._invisibles[i].options.tags[j]
) !== -1
) {
//this._map.addLayer(this._invisibles[i]);
toAdd.push(this._invisibles[i]);
toBeRemovedFromInvisibles.push(i);
break;
}
}
}
}
// Batch add into MCG
layerSource.mcg.addLayers(toAdd);
while (toBeRemovedFromInvisibles.length > 0) {
this._invisibles.splice(
toBeRemovedFromInvisibles.pop(),
1
);
}
var removedMarkers = [];
var totalCount = 0;
if (this._selectedTags.length > 0) {
//this._map.eachLayer(
layerSource.mcg.eachLayer(
function(layer) {
if (
layer &&
layer.options &&
layer.options.tags
) {
totalCount++;
if (releatedLayers.indexOf(layer) == -1) {
var found = false;
for (
var i = 0; i < layer.options.tags.length; i++
) {
found =
this._selectedTags.indexOf(
layer.options.tags[i]
) !== -1;
if (found) {
break;
}
}
if (!found) {
removedMarkers.push(layer);
}
}
}
}.bind(this)
);
for (i = 0; i < removedMarkers.length; i++) {
//this._map.removeLayer(removedMarkers[i]);
this._invisibles.push(removedMarkers[i]);
}
// Batch remove from MCG
layerSource.mcg.removeLayers(removedMarkers);
}
return totalCount - removedMarkers.length;
},
},
});
this.layerSources.currentSource = this.layerSources.sources[
'mcg'
];
},
});
////////////////////////////////////////////////
// Fix for TagFilterButton
////////////////////////////////////////////////
L.Control.TagFilterButton.include({
_prepareLayerSources: function() {
this.layerSources = new Object();
this.layerSources['sources'] = new Object();
this.registerCustomSource({
name: 'default',
source: {
hide: function() {
var releatedLayers = [];
for (var r = 0; r < this._releatedFilterButtons.length; r++) {
releatedLayers = releatedLayers.concat(
this._releatedFilterButtons[r].getInvisibles()
);
}
var toBeRemovedFromInvisibles = [],
i;
// "Fix": add var
for (var i = 0; i < this._invisibles.length; i++) {
if (releatedLayers.indexOf(this._invisibles[i]) == -1) {
// "Fix": add var
for (var j = 0; j < this._invisibles[i].options.tags.length; j++) {
if (
this._selectedTags.length == 0 ||
this._selectedTags.indexOf(
this._invisibles[i].options.tags[j]
) !== -1
) {
this._map.addLayer(this._invisibles[i]);
toBeRemovedFromInvisibles.push(i);
break;
}
}
}
}
while (toBeRemovedFromInvisibles.length > 0) {
this._invisibles.splice(toBeRemovedFromInvisibles.pop(), 1);
}
var removedMarkers = [];
var totalCount = 0;
if (this._selectedTags.length > 0) {
this._map.eachLayer(
function(layer) {
if (layer && layer.options && layer.options.tags) {
totalCount++;
if (releatedLayers.indexOf(layer) == -1) {
var found = false;
for (var i = 0; i < layer.options.tags.length; i++) {
found =
this._selectedTags.indexOf(layer.options.tags[i]) !==
-1;
if (found) {
break;
}
}
if (!found) {
removedMarkers.push(layer);
}
}
}
}.bind(this)
);
for (i = 0; i < removedMarkers.length; i++) {
this._map.removeLayer(removedMarkers[i]);
this._invisibles.push(removedMarkers[i]);
}
}
return totalCount - removedMarkers.length;
},
},
});
this.layerSources.currentSource = this.layerSources.sources['default'];
},
});
////////////////////////////////////////////////
// Adapted from TagFilterButton demo
// https://github.com/maydemirx/leaflet-tag-filter-button/blob/0.0.4/docs/assets/js/main.js
////////////////////////////////////////////////
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib =
'© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib,
});
// initialize the map on the "map" div with a given center and zoom
var releatedUsageMap = L.map('releated-usage-map')
.setView([50.5, 30.5], 12)
.addLayer(osm);
var mcg = L.markerClusterGroup().addTo(releatedUsageMap);
L.marker([50.521, 30.52], {
tags: ['tomato', 'active']
})
.bindPopup('tomato, active')
.addTo(mcg);
L.marker([50.487, 30.54], {
tags: ['tomato', 'ended']
})
.bindPopup('tomato, ended')
.addTo(mcg);
L.marker([50.533, 30.5], {
tags: ['tomato', 'ended']
})
.bindPopup('tomato, ended')
.addTo(mcg);
L.marker([50.54, 30.48], {
tags: ['strawberry', 'active']
})
.bindPopup('strawberry, active')
.addTo(mcg);
L.marker([50.505, 30.46], {
tags: ['strawberry', 'ended']
})
.bindPopup('strawberry, ended')
.addTo(mcg);
L.marker([50.5, 30.43], {
tags: ['cherry', 'active']
})
.bindPopup('cherry, active')
.addTo(mcg);
L.marker([50.48, 30.5], {
tags: ['cherry', 'ended']
})
.bindPopup('cherry, ended')
.addTo(mcg);
var statusFilterButton = L.control
.tagFilterButton({
data: ['active', 'ended'],
filterOnEveryClick: true,
icon: '<span>suitcase</span>',
})
.addTo(releatedUsageMap);
// Enable MCG integration
statusFilterButton.enableMCG(mcg);
/*var foodFilterButton = L.control
.tagFilterButton({
data: ['tomato', 'cherry', 'strawberry'],
filterOnEveryClick: true,
icon: '<i class="fa fa-pagelines"></i>',
})
.addTo(releatedUsageMap);
foodFilterButton.addToReleated(statusFilterButton);*/
html,
body,
#releated-usage-map {
height: 100%;
margin: 0;
}
<!-- Leaflet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" media="screen, print" rel="stylesheet" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js' integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<!-- MarkerCluster Plugin -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.Default.css" />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'></script>
<!-- EasyButton Plugin (compatibility for tagFilterButton) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<!-- tagFilterButton Plugin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button#0.0.4/src/leaflet-tag-filter-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button#0.0.4/src/leaflet-tag-filter-button.js"></script>
<div id="releated-usage-map"></div>
When using leaflet v0.7.7 then leaflet-indoor works perfectly.
After updating to leaflet v1.0.3 markers become draggable, but now leaflet-indoor is not working.
Moreover, leaflet itself is throwing an error:
TypeError: Cannot read property 'call' of undefined
const MapController = function() {
// Containers
var $window = $(window),
mapEl = document.getElementById('map-base'),
mapFileName = window.mapFile,
resourceSidebar = document.getElementById('resourceSidebar'),
detailSidebar = document.getElementById('detailSidebar');
// Links
var addResource = document.querySelectorAll('[data-add-resource]');
setHeight();
// Create map perimeter
// console.log(window);
var view = window.mapDefaultView.split(',');
var map = new L.Map(mapEl, {
center: new L.LatLng(parseFloat(view[0]),parseFloat(view[1])),
zoom: parseFloat(window.mapDefaultZoom),
zoomControl: true
});
makePerimeter()
L.marker([parseFloat(view[0]),parseFloat(view[1])], {
draggable: true,
icon: L.divIcon({
iconSize: null,
html: "<div style='padding:1rem'>Hi</div>"
})
}).addTo(map);
// Not draggable
// Just here for visual reference
// when dragging marker
var circle = L.circle([parseFloat(view[0]),parseFloat(view[1])],100000).addTo(map);
L.control.mousePosition().addTo(map);
// Set heights on the main containers
function setHeight() {
var winHeight = $window.height()+'px';
mapEl.style.height = winHeight;
resourceSidebar.style.height = winHeight;
detailSidebar.style.height = winHeight;
}
// Open the detail sidebar
function toggleDetailSidebar() {
var el = detailSidebar;
if (el.classList.contains('active')) {
el.classList.remove('active');
} else {
el.classList.add('active');
}
}
// Create Perimeter, Guides, and Sections
function makePerimeter() {
$.get(window.mapDataFilePath, function(data) {
var baseLayer = new L.Indoor(data, {
getLevel: function(feature) {
if (feature.properties.relations.length === 0)
return null;
return feature.properties.relations[0].reltags.level;
},
onEachFeature: function(feature, layer) {
layer.bindPopup(JSON.stringify(feature.properties, null, 4));
},
style: function(feature) {
var fill = '#fafafa',
stroke = '#4d4d4d',
part = feature.properties.tags.buildingpart;
switch (part) {
case 'guide':
fill = '#eee';
stroke = '#eee';
break;
case 'section':
fill = 'transparent';
stroke = 'transparent';
break;
}
return {
fillColor: fill,
weight: 1,
color: stroke,
fillOpacity: 1
};
}
});
baseLayer.setLevel("0");
baseLayer.addTo(map);
var levelControl = new L.Control.Level({
level: "0",
levels: baseLayer.getLevels()
});
// Connect the level control to the indoor layer
levelControl.addEventListener("levelchange", baseLayer.setLevel, baseLayer);
levelControl.addTo(map);
perimeterWasMade()
});
}
function perimeterWasMade() {
// Save map view/zoom in hash, so it presists on refresh
var saveView = new L.Hash(map);
// Some other plugins I was messing around with
// Leave commented for now
//L.control.polylineMeasure({imperial: true}).addTo(map);
//L.control.mousePosition().addTo(map);
// 6' booth example
// This is the correct w/h of a 6'w booth that is 4'h
// except it is rotated incorrectly.
// It should be wider than it is tall.
var bounds = [
[ -0.0807 , 12.8787 ],
[ -0.0807 , 13.2845 ],
[ 0.5284 , 13.2845 ],
[ 0.5284 , 12.8787 ]
];
var booth = L.polygon(bounds, {color: 'red', weight: 1})
booth.addTo(map);
// Load booths
loadObjects()
}
function loadObjects() {
// load booths and prizes onto the map
loadJSON("booths.json", function(response) {
var actual_JSON = JSON.parse(response);
$.each(actual_JSON,function(i,val){
if (val.coordinate != undefined && val.size != null)
{
var size = val.size.split('x');
var marker = L.marker([val.coordinate.x,val.coordinate.y], {
id: val.id,
draggable: true,
icon: L.divIcon({
iconSize: null,
html: "<div style='height:"+size[0]+"; width="+size[1]+";'><div style=' padding:5px 10px;'>"+val.vendor.industry +" </div><span style='text-align:center;display:block;border-top:4px solid #888;'>"+val.vendor.name+"</span></div>"
})
}).addTo(map);
// label.dragging.enable();
marker.on('drag', function(event){
console.log("position");
});
//also display booths using leaflet.label
// var label = new L.Label();
// label.setContent("<div style='height:"+size[0]+"; width="+size[1]+";'><div style=' padding:5px 10px;'>"+val.vendor.industry +" </div><span style='text-align:center;display:block;border-top:4px solid #888;'>"+val.vendor.name+"</span></div>");
// label.setLatLng([val.coordinate.x,val.coordinate.y]);
// map.showLabel(label);
}
})
});
}
map.on('click', function(e) {
//alert(e.latlng);
});
// Catch click on resource in sidebar
if (addResource.length > 0) {
addResource.each(function() {
this.addEventListener('click', function(e) {
e.preventDefault();
mapEl.classList.add('adding-booth');
});
});
}
}