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
Related
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);
I can't figure out how to make a draggable pushpin. I used this code that is similar to tutorial I can find everywhere:
<script type='text/javascript'>
function GetMap()
{
var loc = new Microsoft.Maps.Location(47.1, 2.20696);
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'XXXXXXXXXXXXX'
, center: loc,
zoom:16
});
var pin = new Microsoft.Maps.Pushpin(loc);
pin.setOptions( { draggable: true, text:'1' });
map.entities.push(pin);
}
</script>
<script type='text/javascript' src='//www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<div id="myMap" class="bing"></div>
But it is not working.
What may be wrong?
Pushpins were not draggable in the initial release of V8, however this functionality has been added in the experimental branch of V8. Simply add "&branch=experimental" to the map script URL and your pushpin will be draggable. All new features and bug fixes that are currently in the experimental branch will be rolled into the main release branch at the end of the month.
From the script in the html page, I'm trying to control what happens in the Adobe Animate CC animations I've created. For example, here you'll see a script that doesn't work that's trying to tell the ship animation to gotoAndPlay(5). Anyhow, the ship animation is not responding to that. I'm guessing it's because I'm not addressing/naming it correctly. Help me talk to my animations. See the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lets talk to each other</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init () {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function Tell_Canvas_Ship_to_gotoAndPlay5(){
canvas_ship.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
It looks like "canvas_ship" is the ID of your actual canvas element. I think what you are trying to do is control the content you are adding to it.
If so, you can call gotoAndPlay on the exportRoot, which is a MovieClip instance with that API.
exportRoot.gotoAndPlay(5);
The issue you will have though, is that once you create your canvas_ship stage and content, you are overwriting the variables. I recommend changing the name of the second canvas, exportRoot, and stage.
You could also add both elements to one canvas. Is there any reason you are using two canvases, other than that you used the exported content from 2 FLAs?
var stage = new createjs.Stage("canvas_ship");
var ship = new libs_ship.ship();
var car = new libs_car.car();
stage.addChild(ship, car);
createjs.Ticker.addEventListener("tick", stage);
Where is your Tell_Canvas_Ship_to_gotoAndPlay5 method getting called from? Is it a frame script in Animate/Flash?
I've received help and will now share the answer. You are welcome. Just invite me over for breakfast sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>
var canvas, stage, tomtom, jerjer;
function init() {
var exportRoot;
//Tommy
canvas = document.getElementById("canvas_tommy");
tomtom = new lib_tommy.tommy();
stage = new createjs.Stage(canvas);
stage.addChild(tomtom);
stage.update();
createjs.Ticker.setFPS(lib_tommy.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Jerry
canvas = document.getElementById("canvas_jerry");
jerjer = new lib_jerry.jerry();
stage = new createjs.Stage(canvas);
stage.addChild(jerjer);
stage.update();
createjs.Ticker.setFPS(lib_jerry.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function button_from_tommy_was_clicked(){
tomtom.gotoAndPlay(5);
}
function button_from_jerry_was_clicked(){
jerjer.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>
In V7 Bing map you have provided functionality of custmally add pushpin and infobox in clustering map on below link
https://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule3
But in V8 bing map Microsoft didn't provided how can i set Pushpin and infobox in clustering map .
http://www.bing.com/api/maps/sdk/mapcontrol/isdk#clusteringMeanAverage+TS
Can you please provide sample code for pushpin and info box in clustering map ?
Thanks in advance
Here is an example of how to store data with a pushpin using the metadata property and add a click event to the pushpin that opens an infobox:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key'
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create a pushpin in the at a random location in the map bounds.
var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
var pin = new Microsoft.Maps.Pushpin(randomLocation);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin Title',
description: 'Pin discription'
};
//Add an click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
For individual pushpins you can customize them before you add them to the clustering layer and the clustering layer will simply render them. No need for a callback like in the old v7 module. A callback is still used when customizing clustered pushpins.
For infoboxes simply add a click event to the pushpins and clusters and when the event fires you can load an infobox. This is really simply. Also, you only need one infobox in an app and simply update it's content based on what has been clicked.
Full documentation can also be found here: https://msdn.microsoft.com/en-us/library/mt712542.aspx
I'm trying to load a map as per the example in the Google documentation, but it's not loading. I tried using resize, but it's not loading correctly. This map is behind a tab rendered with the Prototype JavaScript Framework which magento uses. It loads correctly when not behind a tab.
<style type="text/css">
#map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
Event.observe( window, "load", function() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
;
google.maps.event.trigger(map, "resize");
});
</script>
The map is shown with grey parts that cover most of the map and the UI elements are not fully initialized. I tried using google.maps.event.trigger(map, "resize");, but it does not seem to do anything. This div is inside a lot of divs.
Example how to add new tab "GMaps" in Magento "Product Edit" (new tab "id" is 'product_info_tabs_GMaps')
PHP part
class My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form
public function __construct() {
parent::__construct();
$this->setTemplate('my/gmaps/tabs/gmaps.phtml');
}
/............................./
}
Template part 'pwron/gmaps/tabs/gmaps.phtml':
<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var GMaps = Class.create();
GMaps.prototype = { .................... }
var gmaps = null;
function switchGMapsTab(tab){
if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
if (!gmaps){
gmaps = new GMaps({});
gmaps.update();
}
}
}
varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab); <script>
trouble way
1. Created Map
2. Tab showed (not loads all tiles)
best way
1. Tab showed
2. Created Map
I had the same problem as you. But I managed to find the solution with this simple code.
First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:
<li onclick="reloadmap()">
And in the map script right after the
google.maps.event.addDomListener(window, 'load', initialize);
put this:
function reloadmap(){
//when you resize the map, you lose your zoom and your center
//so you need to get them again here
z = map.getZoom();
c = map.getCenter();
google.maps.event.trigger(map, 'resize');
//and set them again here
map.setZoom(z);
map.setCenter(c);
}