I'm trying to draw polygon on my map using ngmap. The map is displayed correctly as this example is showing, but when I finish the draw, this is what I'm getting:
ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
I used the same code of the example.
My questions:
1- How can I solve this error?
2- If I want to let the user draw only polygon form, I have tried to set the value of drawingMode to "polygon" but I'm always having the other draw options (circle...). How can let only the polygon draw?
3- How can I let the user clear the drawn polygon?
4- Is it possible to detect the action of putting (drawing) every points. I mean that to draw a line in the polygon for example I need at least two points. Can I detect when the user draw the first point then the second and get its coordinates?
Edit
This is the whole error that I see when I include ng-map.js instead of ng-map.min.js :
Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44)
at Array.reduce (native)
at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39)
at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70)
at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249)
Edit 2
I solved the first question:
My problem was that I'm using routes in the app.js. So the html and the controller are linked in it. To solve the problem, I put $scope.onMapOverlayCompleted instead of
var vm = this;
vm.onMapOverlayCompleted because I don't write the the ng-controller="DrawingManagerCtrl as vm" in my HTML. Then in the HTML I put on-overlaycomplete="onMapOverlayCompleted()" and it works.
I solved also the second question by using:
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
I'm want now to solve the other problems.
Any help please?
3
As the example you referenced shows, the overlaycomplete callback function receives e (Event) as the first parameter. This OverlayCompleteEvent object contains reference to the drawn overlay at Event.overlay (see docs of the original Google Maps JS API more info, since ng-map is only wrapper of the original API after all, specifically "OverlayCompleteEvent object specification" section).
Using that you can get the reference to the created overlay, store it and then later call .setMap(null) on it to delete it from map. E.g:
$scope.myDrawnOverlays = []; //array where you store drawn overlays
$scope.onMapOverlayCompleted(e){
...
myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn
}
$scope.deleteAllDrawnOverlays(){
for(var i = 0; i < myDrawnOverlays.length; i++){
myDrawnOverlays[i].setMap(null); //remove overlays from map one by one
}
myDrawnOverlays = [];
}
Then whenever you want to delete all overlays, just call the function $scope.deleteAllDrawnOverlays (you can tie it to some button using ng-click or do whatever you want with it).
4
This is NOT possible using google.maps.drawing.DrawingManager which is used in your example. The reason is that DrawingManager doesn't support events for clicking at the map while drawing (see docs again for possible events, section "DrawingManager class").
So except hacky workarounds which could break any time with new api release, the only possible solution is to implement drawing of polygon yourself and not use DrawingManager. Check for example this SO answer, specifically the referenced example (right-clicks on map). They don't use ng-map, but basically what would you have to do is to add on-click="mapClickHandler" to your ng-map, in the mapClickHandler get position where you clicked on map, draw Marker there which would look like a dot and if you have more dots connect them with lines.
This is however too much for one question, you would have to probably read up on ng-map and relevant sections of Google Maps Js Api yourself.
Related
I'm making a marker for a google map in primefaces and I'd like to set the icon. But the constructor for marker that allows setting the icon requires a parameter called "data". I'm not finding data being documented anywhere although one place I found says that it gets passed to super(). I can work around this by using a different constructor and then making a call to setIcon but that's two steps instead of one. So, any idea of what data is and how to safely make the call to the constructor that sets the icon?
I am new to Lua scripting, and game development. So please I am just a noob in Lua.
I have searched the net for solutions to my problems, without any luck.
I use Photoshop, Corona, Dusk, json and Tiled on windows7.
I am creating a "board" like game, i.e. Setlers. I am using a world map, as the background. The background image of the game area is a world map (world.png file). I have no problem here.
I would like to create transparrent clickable objects matching the countrys borders on my gamemap with all parameters and values (I have added in Tiled) stored in the object. So When the player clicks on the country the transparrent object (on top of the map) is the one clicked and an eventlistener acts on the click.
In Tiled I can create all the objects I need, naming them + assigning parameters and other values.
If I add object.alpha value in Tiled, the alpha value is passed on to corona and working there.
How can I read these data from the json/tmx file in Corona and adding them to a lua table?
The way I am thinking to use the Tiled map and its objects, is to create one polyline trace of each country’s border (creating one object per country). Then place each “country traced object” on top of the world.png map, also naming the object with the countrys name like “object.name = TileBritannia” and also the other properties for use in game.
My problem is getting the objects info, like object.name, and an eventlistener reacting to a click on the object.
Is a polyline the right way to create a clickable area on a map, when I use a png file as a background image?
What is the best way to create a country border objects, in one layer or with all countries as individual object layers in Tiled.
Can I create one layer with sub objects and still access them in my code?
How do I get the object name and other properties, set in Tiled.
When I try to use the (local britannia = tiledMap:load("britannia.json")) the "load" is not working, getting a nil value.
I am looking for a code that will extract/get/read the object.name i.e. “objBritannia” or "TileBritannia". from the json/tmx file.
When I try to read the different parameters from the json file, I don't get the result I expect. I get the result = function: 046A73B0, was hoping for an object name of some sort.
Please provide links to or code example.
I have edited the question.
Thanks
For questions 1 and 2: I have not used Tiled, but based on Corona Tiled, you have the right strategy in mind. That page makes me think that you can just use tap event listener to detect tap. If you are having issues with the example on that web page, please update your question to be more specific. If tap event handling doesn't work (maybe you're talking about a different Tiled lib), look a Polygon fill and Point in Polygon detection, because that's basically what you need to do. Try some stuff from there. If it still doesn't work for you, then update your question with specifics otherwise it will be likely get closed (it is a little too broad as it is).
For #3, Lua is a dynamic language that supports adding properties to objects in one line. So upon the example on the Corona Tiled page, all you would have to do is
tiledMap = require("tiled")
local britannia = tiledMap:load("britannia.json")
britannia.name = "Britannnia"
local Zulu = tiledMap:load("zulu.json")
zulu.name = "zulu"
Naturally you will probably have a whole bunch so you will create a function that you call for each tile. It's not clear what map.layer["objBritannia "].nameIs("TileBritannia") is supposed to do so I can't comment.
I'm using HTML geolocation and I'd like to achieve the following:
1. User arrives at page
2. User is asked to share location
3. When user says yes, Google Maps initialises and centres on their position
4. We add marker to map showing their position
5. (ongoing) As the user moves, the marker continues to move with them
I've implemented this as follows:
// Add a marker
function addMarker(loc) { // adds marker }
function setupMap(loc) { // initialise map and centre on user's position };
setUpMap(???????);
// Start watching user's position
var watchID = navigator.geolocation.watchPosition(addMarker);
So my question is: how can I get the initial position in order to set up the map?
I can see two options, both of which have flaws:
Call setUpMap from within addMarker, but then the map gets re-initialised each time the user moves, which is obviously inefficient.
Call navigator.geolocation.getCurrentPosition before calling watchLocation - but then the user seems to get prompted twice for their location, which looks clunky.
Any better ideas?
Thanks everyone.
UPDATE
OK, it seems I haven't explained this well. My question is really: how do I get the user's location from watchPosition, as a one-off, so that I can initialise the map once?
Call this:
navigator.geolocation.watchPosition
instead of this:
navigator.geolocation.getCurrentPosition
watchPosition function also initializes positions.
3. Call watchLocation in step two, i.e. to get initial location (the user therefore will only get prompted once)
A similar question was already asked, but does not have a satisfying answer.
I want to change the CSS style for the map type selection buttons (which are actually DIVs that don't have a CSS class). The links in the referenced question show how to subclass controls, but the examples don't seem to work for GMapTypeControl. Tried the following
function CustomGMapTypeControl() {}
CustomGMapTypeControl.prototype = new GMapTypeControl()
CustomGMapTypeControl.prototype.setButtonStyle_ = function(button) {
button.style.backgroundColor = "red";
}
but the setButtonStyle_ function doesn't even get called.
Any solutions for this?
From the above code, I can say that you don't fully understand how to create a custom map control. There are 2 steps:
subclassing GControl
provide initialize() and getDefaultPosition() method.
Well, the initialize method is the place you create and style your control dom elements, and this method must return that dom element back. The getDefaultPosition() method indicates where this control should be placed (top-right,...), and it must return an object of type GControlPosition.
You must provide enough information so that when you call map.addControl(new CustomGMapTypeControl()) so that the map object could invoke and do the right things.
NOTE: All map controls should be added to the map container which can be accessed with GMap2's getContainer() method.
You can play around with http://code.google.com/apis/maps/documentation/javascript/v2/examples/control-custom.html when you want to create your own custom control with firebug.
I am having problems with centering the map using the panTo() method - as well as making the directions (from/to) to work like tabs.
Here is my code:
http://dpaste.com/76251/
I'm not too sure what you want the map to do, but there is one big problem with your panTo() function. You placed it inside of the function markerClickHandler() which is called when the markers are created, which happens on page load. So you are calling panTo() three times when the page is loaded.
If you want it to be called when the marker is clicked, place it in the function which is returned by markerClickHandler().
Keep in mind, however, that the movement will likely be interrupted by the opening of the Info Window (which moves the map). The best solution I can think of to that problem is to move the map after the window has opened. You can pass onOpenFn as a GInfoWindowOptions parameter:
map.openInfoWindowTabsHtml(marker.getLatLng(), tabs, {
onOpenFn: function() {
map.panTo(marker.getLatLng());
}
});
Note: for some reason, this only worked if I called openInfoWindowTabsHtml() on the map object instead of the marker - I don't know why.
The example snippet you're linking to is no longer available, but assuming from the answer by Chris, I'm assuming you want to center the marker whose info window was opened. I had the same problem and solved it like this:
GEvent.addListener(marker, 'infowindowopen', function() {
map.panTo(marker.getLatLng());
});