Im trying to migrate form geoxml to geoxml-v3 and also google maps v2 to v3. The issue I'm having is with geoxml-v3. The icon request generated on the client from geoxml-v3 is garbeled. For example
localhost/app/resources/icon.png
will become something like
localhost/app/resources/app/resources/app/resources/app/resources/icon.png
These kml files work with geoxml and are correctly formed. The style icon segment is
<Style id="off-red">
<IconStyle>
<Icon>
<href>resources/icon.png</href>
</Icon>
</IconStyle>
</Style>
I figured out its a problem with geoxml-v3 library, well at least in my circumstance where I want to store my own marker icons. There is some code, line 386
if (typeof this.url == "string")
which prefixes the icon url with the current context or else the last used context. Didn't look into it to much. Commenting out that if block will lead to correct request.
This is a hack but works for my requirements.
Related
I am following the introduction to Leaflet from https://maptimeboston.github.io/leaflet-intro/. At the first Rat Map, my code failed to show the rodent objects/locations on the map. I c/v the tutorial code directly and still failed to get objects on my map. All of the necessary files are in the same directory (and are appropriately named) as the html file being used.
I'm new to HTML, GeoJSON, and have been unsuccessful in finding a method that I could use to troubleshoot. The data files are complete and have all of the values/objects expected. I'm used to Python/R/VBA, so not having an error message is new to me as well.
I am running the HTML file through a Chrome browser. The HTML files are being written in Sublime Text
//make sure you have the jQuery and rodent GeoJSON files in HTML directory
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("F://FinanceServer//HTML//rodents.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
I was expecting to see something resembling the third map from the aforementioned tutorial site.
The URL to your local file should never work, especially as an absolute path.
Browsers prevent you from accessing the client file system, for well known security reasons.
Even if you open your HTML page directly from file system (with file:// protocol), Chrome browser prevents you from making AJAX requests to other local files. Last time I tried it works in other browsers, though.
Even if you use another browser, your URL should be relative, or specify the protocol / start with double slash to make it absolute.
To avoid most of these limitations, the standard practice in web development is to serve files with a small local server.
I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting
I am trying to integrate Google Map API in the Oracle Commerce Cloud template file for a particular functionality. When I tried to use the below tag in my template file,
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
I got an error message "Named entity expected. Got none." for the & symbol in the src.
I tried using & and %26 instead of &, there was no error, but I could not see the script tag in rendered HTML (Used Inspect option in the browser) and the map is also not rendering.
Is there a way to use google map api in occ template file?
Try making this call in your javascript. And then with Knockout you'll be able to manipulate where you want to display the map.
If you have multiple pages you can use global, otherwise you can use only the javascript of the widget you want.
When I switch from OpenLayers 2.12 to 2.13.1, all Google Maps layers stop working. When I use the layer switcher the map area just turns white.
I don't see any error messages in the development console of my browser at any point, and all files are loaded successfully.
I'm creating layers like this:
var layerGoogleMapsNormal = new OpenLayers.Layer.Google("Google Normal" , { type : google.maps.MapTypeId.ROADMAP, sphericalMercator : true });
var layerGoogleMapsPhysical = new OpenLayers.Layer.Google("Google Physical" , { type : google.maps.MapTypeId.TERRAIN, sphericalMercator : true });
Other layers (OSM, WMS) work fine.
While I was writing this, I found out that the example from OpenLayers doesn't work properly either.
http://dev.openlayers.org/examples/google.html
Could it be that Google made a breaking change?
Does anyone else have the same problem, and does anyone know a solution?
Remark:
I've looked at OpenLayers3, but its API is so different that I don't think we'll ever be able to port all of our code to that. We won't be able to convince our clients to pay for rewriting all of the mapping stuff to make use of OL3, so I guess this project is stuck with the 2.x branch forever...
I had the same problem as you.
In the link that includes the js file from Google, you must tell it to send you an older version, before the breaking change from 15 Sep.
Example:
Normal link: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
Solution link: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&v=3.20"></script>
At the moment, the latest version is 3.22. What works best for me is 3.20 for the same Openlayers version as yours.
More info on the topic:
https://developers.google.com/maps/documentation/javascript/versions
Later Edit: As the comments mention, this fix no longer works. In the github issue thread somebody did a patch fix, but I couldn't find the file for direct download so I had to manually apply the fix to my project. To save the others from doing the same, I'll put here a link to the minified version with the fix included.
Download: OpenLayers 2.13.1 with google fix
The accepted answer now no longer works since, as #geocodezip mentioned, v3.20 has now been retired by Google. In order to make OpenLayers 2.13.x work with the current version of the Google Maps API you must monkey patch the OpenLayers.js file as specified in this comment on OpenLayers issue #1450.
so basically I have a KML file that I load up, and I have 2 different sets of points that I present on there. However, I want to be able to present one set at a time, I figured the simplest way to do this is to split the set into 2 different KML files, and then load the appropriate file depending on set, or if there is another way of doing this, it could work for me as well.
Thanks a lot.
While kaliatech's answer is correct and useful, it is also a bit of overkill and harder to implement than this approach. It is a Google example and toggles the loading of various KML files via checkboxes.
All you need to do is change the filenames of your kmls to red/yellow/green OR change to code to names more specific to your use - depending on how comfortable you feel and what ythe end result you want is.
There are number of ways to do this if you are familiar with JavaScript and can make use of the Google Earth API.
This is an example of hiding/showing a folder within a KML file if the folder has a known ID:
var showFolder = true;
google.earth.fetchKml(gePlugin, kmlUrl, function(rootKmlFeature) {
if (rootKmlFeature) {
var myFolderEl = rootKmlFeature.getElementById('#myFolderId');
if (showFolder) {
myFolderEl.setVisibility(true);
}
else {
myFolderEl.setVisibility(false);
}
}
});
The root KmlFeature is always a KmlContainer which provides methods for looking up child elements. Note that it can be difficult to know whether or not you need to use "getElementById" or "getElementByUrl". The google documentation isn't particularly clear:
https://developers.google.com/earth/documentation/reference/interface_kml_container
Once you have a reference to the folder (or relevant KmlFeature), you can set the visibility (and many other properties) dynamically in response to UI events or whatever.
Edit (after your comment)
The fetchKml callback (in the HTML) provides you with the loaded kmlObject. Depending on how you want to trigger the show/hide interaction, you probably want to store that kmlObject in a higher (perhaps global) scope. Then, when user presses button, or whatever, you can do something like this:
function displayPlacemark1(visible) {
var baseUrl = 'https://sites.google.com/' + 'site/shahinkmlexamples/experiment/bombs12.kml';
var placemark = kmlObject.getElementByUrl('#placemark1');
placemark.setVisibility(visible);
}
Correspondingly, in your KML file, you want to add an id attribute to the placemarks. i.e.
...
<Placemark id="placemark1">
...
The solutions above describe the Google Earth API approach with JavaScript.
The pure-KML solution is to add a radio button via a ListStyle to a Folder in your KML then have each set of points in a sub-folder or NetworkLink link. You can make one of the sets visible by default by adding <visibility>0</visibility> element on the other sub-folders you want not shown initially. Another trick is having an empty first feature with instructions in the name or description to select radio button to view the other sets. You can find this used in the Google Maps Overlay in Google Earth.
radioFolder when specified for a Container, only one of the Container's items is visible at a time.
Here's example of KML using a radioFolder with two sets of Points:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="rf">
<ListStyle>
<listItemType>radioFolder</listItemType>
</ListStyle>
</Style>
<Folder>
<name>Radio A visible by default</name>
<description>Select which folder to see</description>
<styleUrl>#rf</styleUrl>
<Folder>
<name>Folder A</name>
<Placemark>
<name>Radio A</name>
<Point>
<coordinates>-121.9921875, 37.44140625</coordinates>
</Point>
</Placemark>
</Folder>
<Folder>
<name>Folder B</name>
<visibility>0</visibility>
<Placemark>
<name>Radio B</name>
<visibility>0</visibility>
<Point>
<coordinates>-121.9921875, 37.265625</coordinates>
</Point>
</Placemark>
</Folder>
</Folder>
</Document>
</kml>
Reference:
https://developers.google.com/kml/documentation/kmlreference#listItemType