I am trying to load external geojson by using leaflet ajax.
I think the structure of geojson is true. This is the link of it.
Here is what i did based on HERE:
in the head:
<script src="../external/js/leaflet.js"></script>
<script src="../external/js/leaflet.functionaltilelayer.js"></script>
<script src="../external/js/leaflet.ajax.min.js"></script>
In javascript:
var mymap = L.map('mapid',{ center: new L.LatLng(the_center_splitted[0],the_center_splitted[1]),maxZoom: 17, minZoom:11, zoom: 14}); //creating the map
var gs = new L.TileLayer('../external/maps/qom/gs/gs_{x}_{y}_{z}.jpg', {opacity: 1,scheme: 'TMS'}).addTo(mymap); //loading image layer
var geojsonLayer = new L.GeoJSON.AJAX("../external/map/qom/geojson/qom.geojson");
geojsonLayer.addTo(mymap);
But the geojson file is not shown and i get this error:
ncaught TypeError: L.GeoJSON.AJAX is not a constructor
I appreciate if any one can help.
Thank you.
What is "functionaltilelayer.js" for? In the code Snippet you don't need that.
And var gs = new L.tileLayer with a lower t - change that and try it again!
<script src="../external/js/leaflet.js"></script>
<script src="../external/js/leaflet.ajax.min.js"></script>
var mymap = L.map('mapid',{ center: new L.LatLng(the_center_splitted[0],the_center_splitted[1]),maxZoom: 17, minZoom:11, zoom: 14}); //creating the map
var gs = new L.TileLayer('../external/maps/qom/gs/gs_{x}_{y}_{z}.jpg', {opacity: 1,tms: true}).addTo(mymap); //loading image layer
var geojsonLayer = new L.GeoJSON.AJAX("../external/map/qom/geojson/qom.geojson");
geojsonLayer.addTo(mymap);
Your code seems okay - did you import
<script src='leaflet-ajax.js'></script>
If yes, please show your whole code!
Its a bit tricky to import files via AJAX.
First remember that the relative path your giving the AJAX() method should be a Your Geojson file should be path from the location of the leaflet-ajax script file. (Since it is there the AJAX-call gets done).
I would recommend a different approach (without AJAX calls):
Your GeJson file (rename it to gejson.js) should look like this:
var json = { "type": "FeatureCollection",
"features": [{
...
Import this file before your leaflet ajax code:
<script src="../../geojson.js" type="text/javascript"></script>
This will give you access to a variable called json which you then can use to import the json object in your layer:
var geojsonLayer = L.geoJSON().addTo(mymap);
geojsonLayer.addData(json);
Related
Setting an ACE editor instance to JSON or XML language mode works great.
But my statement
LiquidMode = ace.require("ace/mode/liquid").Mode,
// fails, ace.require("ace/mode/liquid") returns undefined
Yet the ace/mode/liquid file is defined on the cdn and is returned by it.
Thank you for any ideas or alternatives.
The cdn call and more:
<script src="https://cdn.jsdelivr.net/g/ace#1.2.6(noconflict/ace.js+noconflict/mode-hjson.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>
// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
JSONMode = ace.require("ace/mode/json").Mode,
LiquidMode = ace.require("ace/mode/liquid").Mode; // fails,
// ace.require("ace/mode/liquid") returns undefined
...
ace_session.setMode(new JSONMode()); // works great
...
ace_session.setMode(new LiquidMode());
When you load ace.js with multiple file syntax, dynamic loading doesn't work, because ace can't determine the url from which it was loaded.
As a workaround you can use
var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/"
ace.config.set("basePath", url)
see https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/config.js#L185
Note that you don't need to pass mode object, setMode("ace/mode/liquid") works too.
<script src="https://cdn.jsdelivr.net/g/ace#1.2.6(noconflict/ace.js+noconflict/mode-json.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>
<script >
// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
JSONMode = ace.require("ace/mode/json").Mode,
LiquidMode = ace.require("ace/mode/liquid").Mode;
debugger
var editor = ace.edit()
var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/";
ace.config.set("basePath", url)
editor.setValue("use core::rand::RngUtil;\n\nfn main() {\n \n}", -1)
editor.setOptions({
autoScrollEditorIntoView: true,
maxLines: 15,
});
document.body.appendChild(editor.container)
editor.session.setMode("ace/mode/rust");
</script>
Is it possible to add a model(say ,a mobile phone) using three.js in html5 canvas and then make it customizable like adding text,image etc.( on mobile ) using any canvas library,so as to make an interactive 3d model.
Thanks.
You could use a library called Dat.GUI, which allows you to create a quick user interface that can accept plain text input fields, drop downs, select boxes, as well as numerical sliders. Here's an example of it being used with a text input field, which you could use to input a texture/image URL.
It's a really powerful library that can be further styled with CSS, if needed. This is all the code you need to get up and running (as you can see below, the object's properties get modified directly by Dat.GUI via invoking gui.add(object, 'property')):
<script type="text/javascript" src="dat.gui.js"></script>
<script type="text/javascript">
var FizzyText = function() {
this.message = 'dat.gui';
this.speed = 0.8;
this.displayOutline = false;
this.explode = function() { ... };
// Define render logic ...
};
window.onload = function() {
var text = new FizzyText();
var gui = new dat.GUI();
gui.add(text, 'message');
gui.add(text, 'speed', -5, 5);
gui.add(text, 'displayOutline');
gui.add(text, 'explode');
};
</script>
Yes. Three.js uses a canvas to render the 3D things and you can use any HTML tools to make the rest of that web page how you want.
I am working on an app with node-webkit to get some data of a TIFF-image. Because of TIFF-images are not supported by webkit, I want to create a temporary PNG version to show it in the app. How could I do this? Is there a way or place for temporary files in node-webkit like App.dataPath? Or should I use another node module node-temp?
I'm looking very forward to get your answers soon. Thank you.
You don't need to create temporary image file, try data URL.
<h1>You will see an image later</h1>
<img id="img" src="">
<script type="text/javascript">
//start js code here
var data_prefix = "data:image/png;base64,";
var img = document.getElementById('img');
var xhr = new XMLHttpRequest();
xhr.open('GET','https://avatars2.githubusercontent.com/u/1356417?s=140',true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var arr = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null,arr);
var b64=btoa(raw);
var dataURL="data:image/jpeg;base64,"+b64;
img.src = dataURL;
};
xhr.send();
</script>
Yes, consider using the HTML5 File APIs if you are after a pure client-side solution.
This article has you covered.
This is, of course, assuming that you are manipulating the TIFF data in client-side Javascript, and want to write it to a temporary .png file.
I have a MVC3 web application that has a place to input Google map address, But There is a security risk, say XSS.
Google map address contains iframe element and we can't use AntiXSS library to sanitize input. I also forced to turn off validation due to accept form data at controller action too.
But How to Secure this part of application?
Any idea perhaps technically will be useful. Thanks before.
We need Black-List for using Iframe due to control input.
An easy way is to get Latitude and Longitude as input variables by API. So using them like below:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
Or Using something more useful like This resource.
I want to edit my country map so I first added Geoserver but I can't edit this map. I want to show openlayers using Geojson but for some reason I can't edit this either.
How i can edit this map? The following is my code with geoserver link:
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.zoomToMaxExtent();
new OpenLayers.Map("map");
var dm_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://localhost:8080/geoserver/wms?",
{
layers: "trgm:iller",
format: "image/png"
},
{
isBaseLayer: false
}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
To edit map data in geoserver, you need to use WFS Service.
Then using OpenLayers, you can set the layer editable.
see OpenLayers example