Google Map API Marker Icon Url? - google-maps

I'm trying to change marker icon to "red-circle" or "red-pin" or anything else.
In these codes;
markerOptions: {
icon: 'images/beachflag.png'
},
the marker doesn't show. But if i make the icon line a comment line, so marker shows like "red-pin" icon
So, i need to marker icons list or URL list which directly supported by Google Map API. Or is there such a thing?
Thank you.

This is the (unofficial) list that I refer to:
https://groups.google.com/d/msg/Google-Maps-API/2k3T5hwI5Ck/RRso0D2jB1oJ
provided by pamela (who was a Google employee at the time), it is fairly old, but still accurate.
=================== -- ============================
-- from Mike Williams --
It's also worth noting that only the original set of icons is available
in the location that was mentioned earlier in this thread
E.g. blue.png is available at both locations
http://maps.google.com/mapfiles/ms/icons/blue.png
http://maps.google.com/mapfiles/ms/micons/blue.png
But the new yen.png icon is only here
http://maps.google.com/mapfiles/ms/micons/yen.png
-- from pamela --
I'll provide the list to you here, but you should know it's possible
some of these icons will disappear later. You may want to copy to your
own server to be sure.
Happy reading... :)
POI.png
POI.shadow.png
arts.png
arts.shadow.png
bar.png
bar.shadow.png
blue-dot.png
blue-pushpin.png
blue.png
bus.png
bus.shadow.png
cabs.png
cabs.shadow.png
camera.png
camera.shadow.png
campfire.png
campfire.shadow.png
campground.png
campground.shadow.png
caution.png
caution.shadow.png
coffeehouse.png
coffeehouse.shadow.png
convienancestore.png
convienancestore.shadow.png
cycling.png
cycling.shadow.png
dollar.png
dollar.shadow.png
drinking_water.png
drinking_water.shadow.png
earthquake.png
earthquake.shadow.png
electronics.png
electronics.shadow.png
euro.png
euro.shadow.png
fallingrocks.png
fallingrocks.shadow.png
ferry.png
ferry.shadow.png
firedept.png
firedept.shadow.png
fishing.png
fishing.shadow.png
flag.png
flag.shadow.png
gas.png
gas.shadow.png
golfer.png
golfer.shadow.png
green-dot.png
green.png
grn-pushpin.png
grocerystore.png
grocerystore.shadow.png
groecerystore.png
groecerystore.shadow.png
helicopter.png
helicopter.shadow.png
hiker.png
hiker.shadow.png
homegardenbusiness.png
homegardenbusiness.shadow.png
horsebackriding.png
horsebackriding.shadow.png
hospitals.png
hospitals.shadow.png
hotsprings.png
hotsprings.shadow.png
info.png
info.shadow.png
info_circle.png
info_circle.shadow.png
landmarks-jp.png
landmarks-jp.shadow.png
lightblue.png
lodging.png
lodging.shadow.png
ltblu-pushpin.png
ltblue-dot.png
man.png
man.shadow.png
marina.png
marina.shadow.png
mechanic.png
mechanic.shadow.png
motorcycling.png
motorcycling.shadow.png
movies.png
movies.shadow.png
msmarker.shadow.png
orange-dot.png
orange.png
parkinglot.png
parkinglot.shadow.png
partly_cloudy.png
partly_cloudy.shadow.png
pharmacy-us.png
pharmacy-us.shadow.png
phone.png
phone.shadow.png
picnic.png
picnic.shadow.png
pink-dot.png
pink-pushpin.png
pink.png
plane.png
plane.shadow.png
police.png
police.shadow.png
postoffice-jp.png
postoffice-jp.shadow.png
postoffice-us.png
postoffice-us.shadow.png
purple-dot.png
purple-pushpin.png
purple.png
pushpin_shadow.png
question.png
question.shadow.png
rail.png
rail.shadow.png
rainy.png
rainy.shadow.png
rangerstation.png
rangerstation.shadow.png
realestate.png
realestate.shadow.png
recycle.png
recycle.shadow.png
red-dot.png
red-pushpin.png
red.png
restaurant.png
restaurant.shadow.png
sailing.png
sailing.shadow.png
salon.png
salon.shadow.png
shopping.png
shopping.shadow.png
ski.png
ski.shadow.png
snack_bar.png
snack_bar.shadow.png
snowflake_simple.png
snowflake_simple.shadow.png
sportvenue.png
sportvenue.shadow.png
subway.png
subway.shadow.png
sunny.png
sunny.shadow.png
swimming.png
swimming.shadow.png
toilets.png
toilets.shadow.png
trail.png
trail.shadow.png
tram.png
tram.shadow.png
tree.png
tree.shadow.png
truck.png
truck.shadow.png
volcano.png
volcano.shadow.png
water.png
water.shadow.png
waterfalls.png
waterfalls.shadow.png
webcam.png
webcam.shadow.png
wheel_chair_accessible.png
wheel_chair_accessible.shadow.png
woman.png
woman.shadow.png
yellow-dot.png
yellow.png
yen.png
yen.shadow.png
ylw-pushpin.png

Related

Mapbox - What are my layer ID's?

I'm new to using Mapbox.
I'm trying to add a new layer to my map that is above the water layer but below labels.
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine',
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
}, 'water');
(This code was taken from some example code from Mapbox.)
Right now, this creates a layer that is below the water layer and the labels. However, I can't figure out what layer ID would bring it above the water layer.
This is the stylesheet I'm using:
mapbox://styles/mapbox/light-v9
How do I find the other valid layer ID's for this style sheet? I've tried 'streets', 'roads', 'road', 'land', etc, but nothing has worked. I thought this link included all the layer names:
https://www.mapbox.com/studio/styles/mapbox/light-v9/
but the only one that keeps my new layer from just being on top of everything is 'water'. Help!
You can retrieve style specifications from the styles api.
For example to get all the layer_ids on the light-v10 style you could do this in python:
import requests
for layer in requests.get('https://api.mapbox.com/styles/v1/mapbox/light-v10?access_token=pk.eyJ1IjoiYmNrb2hhbiIsImEiOiJja2Zvamc4ejcyZjRxMzFwMXNwcGIxdDVlIn0.KdUOuJFIaV4eCzq94AgMGw').json()['layers']: print(layer['id'])
Which yields:
land
landcover
national-park
landuse
water-shadow
waterway
water
hillshade
land-structure-polygon
land-structure-line
aeroway-polygon
aeroway-line
building-outline
building
tunnel-street-minor-low
tunnel-street-minor-case
tunnel-primary-secondary-tertiary-case
tunnel-major-link-case
tunnel-motorway-trunk-case
tunnel-construction
tunnel-path
tunnel-steps
tunnel-major-link
tunnel-pedestrian
tunnel-street-minor
tunnel-primary-secondary-tertiary
tunnel-motorway-trunk
road-pedestrian-case
road-minor-low
road-street-low
road-minor-case
road-street-case
road-secondary-tertiary-case
road-primary-case
road-major-link-case
road-motorway-trunk-case
road-construction
road-path
road-steps
road-major-link
road-pedestrian
road-minor
road-street
road-secondary-tertiary
road-primary
road-motorway-trunk
road-rail
bridge-pedestrian-case
bridge-street-minor-low
bridge-street-minor-case
bridge-primary-secondary-tertiary-case
bridge-major-link-case
bridge-motorway-trunk-case
bridge-construction
bridge-path
bridge-steps
bridge-major-link
bridge-pedestrian
bridge-street-minor
bridge-primary-secondary-tertiary
bridge-motorway-trunk
bridge-rail
bridge-major-link-2-case
bridge-motorway-trunk-2-case
bridge-major-link-2
bridge-motorway-trunk-2
admin-1-boundary-bg
admin-0-boundary-bg
admin-1-boundary
admin-0-boundary
admin-0-boundary-disputed
road-label
waterway-label
natural-line-label
natural-point-label
water-line-label
water-point-label
poi-label
airport-label
settlement-subdivision-label
settlement-label
state-label
country-label
I would just add a note of caution that the layer ids for the default styles can change significantly version to version.
You can experiment in Mapbox.com/studio by adding your maine tile set into a new style, then you can move the layer interactively to experiment and proof the effect that you want.
The second parameter for addLayer is before, so your maine source should've gone before the water layer. See the docs on addLayer for details
https://www.mapbox.com/mapbox-gl-js/api/#Map#addLayer
The names of the layers are identified by "id" in the Style.json.
You can find the names of the layers by going to the link you posted
https://www.mapbox.com/studio/styles/mapbox/light-v9/
there you will see a nice visualization of the layer ids from Mapbox.
The water layer is near the bottom of the layers stack of the Mapbox light style.
Here are the layers with water in the "id.
"id": "waterway-river-canal",
"id": "water shadow",
"id": "water",
"id": "waterway-label",
"id": "water-label",
Your layer ID can be found by opening your map in Mapbox Studio. If you go to View style details (the box with an arrow in the top right corner of the left hand window, it will reveal all the layers.

How to get data from a specific section in MediaWiki supported wikis

I am parsing a Wikia article and trying to get the data from the right hand side highlighted block, I have already got the left one using the following URL
http://hetalia.wikia.com/api.php?action=parse&prop=revisions&prop=sections&page=America&format=json
But don't know the reference about the right one. What will be the parameter?
The original URL is,
http://hetalia.wikia.com/wiki/America
I believe the only way to get info from the Infoboxes would be to get the page source, which can be done with this query
http://hetalia.wikia.com/api.php?action=query&prop=revisions&rvprop=content&titles=America&format=json
And then parsing the text to get the information, as the source of that box is in this format
{{Character
|name = America
|jname = アメリカ
|image = America0.png
|country = [[wikipedia:United States|The United States of America]]
|human = Alfred F.Jones (アルフレッド・F・ジョーンズ, ''Arufureddo F. Joonzu'')
|age = 19
...
|japanese = [[Katsuyuki Konishi]], Ryoko Shimizu (Young America, drama CD "Prologue"), [[Ai Iwamura]] (Young America, anime), [[Axis Powers Hetalia: The CD|Osamu Ikeda]] (''Flower Of Iris'')
|english = [[Eric Vale]], Stephanie Young (young America)}}
You could use Regex to extract the data from the text, such as using \|age\s*=\s*(\d*) to get the age attribute.

Projecting an Image on Google Map using OpenLayers 3

I am trying to overlay a satellite image (a 6471x7669 jpg file) over Google Map using OL3. The image file's meta-data and projection info is provided as:
Driver: JP2ECW/ERDAS JPEG2000 (SDK 3.x)
Files: /mnt/NAIP/TN/2012/34084/m_3408403_ne_16_1_20120527_20120911.jp2
Size is 6471, 7669
Coordinate System is:
PROJCS["NAD83 / UTM zone 16N",
GEOGCS["NAD83",
DATUM["North_American_Datum_1983",
SPHEROID["GRS 1980",6378137,298.2572221010002,
AUTHORITY["EPSG","7019"]],
AUTHORITY["EPSG","6269"]],
PRIMEM["Greenwich",0],
UNIT["degree",0.0174532925199433],
AUTHORITY["EPSG","4269"]],
PROJECTION["Transverse_Mercator"],
PARAMETER["latitude_of_origin",0],
PARAMETER["central_meridian",-87],
PARAMETER["scale_factor",0.9996],
PARAMETER["false_easting",500000],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]],
AUTHORITY["EPSG","26916"]]
Origin = (710739.000000000000000,3875921.000000000000000)
Pixel Size = (1.000000000000000,-1.000000000000000)
Metadata:
COLORSPACE=MULTIBAND
COMPRESSION_RATE_TARGET=9
VERSION=1
Corner Coordinates:
Upper Left ( 710739.000, 3875921.000) ( 84d41'26.44"W, 35d 0'14.31"N)
Lower Left ( 710739.000, 3868252.000) ( 84d41'33.42"W, 34d56' 5.56"N)
Upper Right ( 717210.000, 3875921.000) ( 84d37'11.35"W, 35d 0' 9.39"N)
Lower Right ( 717210.000, 3868252.000) ( 84d37'18.55"W, 34d56' 0.64"N)
Center ( 713974.500, 3872086.500) ( 84d39'22.44"W, 34d58' 7.49"N)
Band 1 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #1
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 2 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #2
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 3 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #3
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 4 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #4
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
The problem I'm having is to interpret the data and figure out what projection to use (I'm not a geographer). I have already tested both EPSG:900913 and EPSG:3857 to transform to EPSG:4326, but it doesn't seem to work:
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
The provided data mentions EPSG:7019, EPSG:6269, EPSG:4269, EPSG:9001, and EPSG:26916, none of which seem to have Proj4js definitions. The provided corner & center lat/lons coordinates are pretty accurate.
My questions are: is there an existing proj4.defs for this? If not, how can I create one? Any help on this is greatly appreciated.
UPDATE
Expanding on this question further: Initially we center the static image over Google Map just fine.
But not sure what transformation to use as the layers are moved together. In a nutshell what should be the transformation <transform> in this code?
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(), <transform>, 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]))
});
You source image is in NAD83 UTM 16N or EPSG:26916 see http://spatialreference.org/ref/epsg/nad83-utm-zone-16n/
UTM is a Transverse Mercator projection with vertical 6 degree strips of the world projected onto a cylinder with its axis through the poles. Google maps uses a spherical Mercator (horizontal cylindrical) projection - EPSG:3857. The properties of these two are quite different - you will not be able to accurately overlay your 26916 image on a 3857 map without reprojecting it.
Have you looked at this http://openlayers.org/en/latest/examples/reprojection-image.html ?
Alternatively, you could use a GIS program of some sort to re-project your image to 3857 for easier composition with a 3857 map - say something like GlobalMapper.

Hovertool Bokeh "Cannot read property"

My problem is that in Chrome, when I have my cursor on my histogram hover my data, I have this error :
Uncaught TypeError: Cannot read property '0'
There is my code :
hist, edges = np.histogram(data,bins=3000)
plot = quad(
top=hist,
bottom=0,
left=edges[:-1],
right=edges[1:],
fill_color="#036564",
line_color="#033649",
tools="pan,wheel_zoom,box_zoom,reset, hover",
x_range=[-0.5,3.5],
plot_width=1100,
title="",
)
hover = plot.select(dict(type=HoverTool))
hover.tooltips = [('index','$index')]
resources = Resources("inline")
plot_script, plot_div = components(plot, resources)
html_script = mark_safe(encode_utf8(plot_script))
html_div = mark_safe(encode_utf8(plot_div))
figure()
return html_script, html_div
"data" is a array like this :
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.24,1,1.32,1,2,3]
I tried to add a "source" in the quad, changed the figure, changed my code for the one on the documentation but I still have my error.
For information, everything is working very well, except the hover tool.
Indeed, in the "hover box" I want another informations then just "index", but it's just for testing.
Thanks for reading !
Sorry I missed this earlier. You have uncovered a small bug with the hover tool that is particular to quad glyphs. In the mean time you can add hover.snap_to_data = False to get it to work.
Here is a GH issue you can track for the full solution:
https://github.com/bokeh/bokeh/issues/1644
A fix should be in the 0.7.1 release next Monday.
Also BTW, you are using a deprecated API. You should now write code like:
p = figure(...)
p.quad(...)

Flash AS3 trivia game incorrect answer graphic needs to appear on stage in 3 locations

I'm creating a trivia game in which a user answers a certain number of questions per round and if they get 3 wrong they fail the round. When a question is marked as incorrect an x is placed in a box from left to right, each x goes into a box in their own location.
I'm having trouble getting the x's to go to their location, based on the questions answered incorrectly.
Here is an image of the game image
Here is the code I'm using:
var questions:Array=['"I look like a dangling parsnip in this!" she cried. "I will never __________ these jeans!',
"Tell the freckled parrot to put his car in __________.",
"When purchasing a buttercream trowel, always choose one made of __________.",
"Everybody has a cracked snowflake. The question is, __________ one is yours? ",
"Standing at the dock, the loopy basket watched the cruise ship set __________ without him. ",];
var answers:Array=[ ["wear","where"], ["idle","idol"], ["steel","steal"] ,[ "which","witch"] ,[ "sail","sale"] ];
var qno=0;var rnd1; var rnd2;
tick.visible=false;cross1.visible=false;
var right_answers=0;var wrong_answers=0;
shade1.buttonMode = true;
shade1.useHandCursor = true;
shade2.buttonMode = true;
shade2.useHandCursor = true;
function change_question(){
if(tick.visible){right_answers++;}
if(cross1.visible){wrong_answers++;}
if(qno==questions.length){gotoAndPlay(60);}else{
tick.visible=false;cross1.visible=false;
rnd1=Math.ceil(Math.random()*3);
rnd2=Math.ceil(Math.random()*questions.length)-1;
q.text=questions[rnd2];
if(questions[rnd2]=="x"){change_question();}
questions[rnd2]="x";
enable_disable(1);
if(rnd1==1){opt1.text=answers[rnd2][0];opt2.text=answers[rnd2][1];}
if(rnd1==2){opt1.text=answers[rnd2][0];opt2.text=answers[rnd2][1];}
if(rnd1==3){opt1.text=answers[rnd2][0];opt2.text=answers[rnd2][1];}
if(rnd1==4){opt1.text=answers[rnd2][0];opt2.text=answers[rnd2][1];}
if(rnd1==5){opt1.text=answers[rnd2][0];opt2.text=answers[rnd2][1];}
}}
function enable_disable(a){
if(a==0){shade1.mouseEnabled=false;shade2.mouseEnabled=false;}
if(a==1){shade1.mouseEnabled=true;shade2.mouseEnabled=true;}}
change_question();
shade1.addEventListener(MouseEvent.CLICK, ButtonAction2);
shade2.addEventListener(MouseEvent.CLICK, ButtonAction3);
function ButtonAction2(eventObject:MouseEvent) {
enable_disable(0);if(rnd1==1) {tick.visible=true;tick.y=shade1.y}else{cross1.visible=true;cross1.y=shade1.y}
//qno++;change_question();
}
function ButtonAction3(eventObject:MouseEvent) {
enable_disable(0);if(rnd1==2){tick.visible=true;tick.y=shade2.y}else{cross1.visible=true;cross1.y=428.55}
//qno++;change_question();
}
Any help is much appreciated, please let me know if more information is needed. Thank you in advance.