PDA

View Full Version : Assigning entered times to marks that are colour coded for time frame



kwood30
03-07-2016, 11:50 AM
I am trying to find out if at all possible how I would go about being able to assign a date and time to a marker placed on google maps through a form function. This will then display that on the marker but also with a color coded time frame. So when this info is added to the marker, when it is moused over say 1hr later it would state the number of mins or hrs ago it was entered and also be the colour assigned to the time, for example if the color yellow was for less than 2hrs ago then the marker will be yellow if it becomes 6hrs later then it will be a different color and so on. Does this make sense, and is it possible? Just need some help and ideas. I am guessing will need to use some sort of looping, and variable coding?? Any input would be appreciated. Thanks

jscheuer1
03-07-2016, 09:45 PM
You seem to love loops, but unless you are processing more than one thing at a time, the usually aren't needed.


marker.time = new Date();

That (above code) (assuming you're still using the same or similar code we discussed before, where the variable marker stands for the specific marker being created at any given moment) would assign it a javascript date object from which one could later extract any information you might want to know about how old it is.

As for color coding and displaying the result. You would need rules for that in a 'if, if else, if else . . .' chain or via using the javascript switch construct to determine at any given moment what color that info should be displayed in. The mouseover event could be the trigger for that (the figuring and the displaying) action.

If you want more help, please supply or link to the exact current code you're using so we can work from there.

kwood30
03-08-2016, 08:24 AM
Its seems that way lol. Learning steps at a time. Plenty I want to do but taking it slow as its all learning for me.
Thanks for your input. It is to inbed in what we were previously doing.
I will have a go with it and have some attempts and will then come back to you with etc support if that is ok?

jscheuer1
03-08-2016, 01:13 PM
Sure, that's fine. Let me know if you have any questions. I just ask that if you want specific help that you let me see the version of the code you are most interested in applying this to at that time as it could make a considerable difference in how exactly to go about things.

kwood30
03-08-2016, 09:56 PM
what would i be looking at in ways of assigning colour to a marker where the information is added. So where i have the geo marked with a inputted reference, and mouse overed to view that in a seperate window (which we have already accomplised) but i then want an 'assigned' button in that window that pops up when mouse overed so when selected the marker is assigned a colour (just one colour). Dose that make sense lol

jscheuer1
03-09-2016, 02:23 AM
I'm not sure why, but at the moment it looks like one can only find out the time elapsed from marker creation until first mouseover into the infowindow popup. After that, the continuing increment of time is available to the supplemental window I had created for some versions of this, but not for the infowindow itself. Now, it's possible that we could replace the info window with the supplement window, I'm just not sure of that at the moment. It would not have the auto map movement if the content of the popup doesn't fit in the current map area if the infowindow needed that though, at least I don't think it would/could, maybe. And there might be a way around recalibrating the time for the native infowindow, to make that work.

What I would recommend though, given what I'm currently seeing, is to keep the popup on the map static. Include in it only the static reference and/or place name/post code, and possibly time first created. Then, in the supplemental window you could have whatever effects and information as regards elapsed time you might want.

I'll play around with it some more to see if there's a way around the apparent limitation I'm seeing. In the meantime, consider whether or not what I'm currently proposing would be sufficient.

Oh, and since this is looking tricky, as I thought it might. What code are you using? Remember - I asked for that if you wanted more specific help.

Looks like this will work (let me know if you have questions):


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function colorConvertTime(millis){
var mins = Math.round(millis/60/60/60);
switch(mins) {
case 0:
return '<span style="color: red;">about ' + mins + ' mins elapsed</span>';
break;
case 1:
return '<span style="color: blue;">about ' + mins + ' mins elapsed</span>';
break;
default:
return '<span style="color: green;">about ' + mins + ' mins elapsed</span>';
}
}

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('#reference').val());
//ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
var content = infowindow.content + '<br>' + colorConvertTime(new Date().getTime() - this.time.getTime());
infowindow.open(map, marker);
$('#supplementwindow').html(content).fadeIn();
$('.gm-style-iw div div').html(content);
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}

</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
<!-- Reference&nbsp;
<input type="text" class="reference">
<br>
<br> -->
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
03-09-2016, 04:42 PM
Thanks for your input but its slightly different to what I am asking for.
I have been working on my design today and I just can get the java side of it. As you can see below what I have done. HTML party is easy for me. I have created basically what I need but just can't get the programming for it, and now I have lost the map, through the coding that I have added for the drop down menu for counties.
What I am trying to great a drop down menu for the counties that i have entered so that when they are selected to zooms to that countie. I would preferably like couty border lines shown too, but not sure if thats possible.
With the assign button i have created in the supplement window, is what I want showing when a mouse over is done and if they assaign that selected marker it changes the colour of the marker to say yellow.
I am still wanting the time and date stated in the info window as to when the reference was assigned to the marker. Does this make sense? I hope you can see what I have done and that you feel i am progressing with my Java lol. Many thanks again for your help.

<!DOCTYPE html>
<html>

<head>





<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('#reference').val());
//ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}



function countiesDropdown(container){
var counties = {
"bedfordshire",
"hertfordshire",
"cambridgeshire",
"northamptonshire"

}
var out = "<select><option value=""></option>";</select>
<select> for (var key in counties) {</select>
<select> out += "<option value="&quot; + key + &quot;">" + counties[key] + "</option>";</select>
<select> }</select>
<select> out += "</select>";
console.log(out);
document.getElementById(container).innerHTML = out;
}



var up206b = {};


var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){

$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});


</script>
</head>
<body onload="up206b.initialize()">

<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >


<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

<div id="menu" style=" position: absolute; margin: 45px 89px;" > <select id="Counties"><option value="">Select County</option></select> </div>

</div>


<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">

</div>


<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>



</body>
</html>

jscheuer1
03-10-2016, 03:24 AM
It's javascript, not java - two entirely different things. Also where is this HTML party you're talking about?

Kidding about the question, I think you meant "part", not "party".

About this drop down list of counties, is the map supposed to come pre-populated with these as markers? Otherwise, how would clicking on one of them focus on it? Or do you mean clicking on one would both create it as a marker if it wasn't already and then focus on it, then later just focus on it if it was previously created? I think we can do that.

I'm still not clear where the color comes in. What decides which color something is? Or is it arbitrary with each marker simply having a different color? Or is it somehow tied to the elapsed time since the marker was created? If so, how?

Not sure about an outline, I will Google that to see if it's an available feature. I don't remember ever seeing anything like that on a Google map though. If it is available, I think you would have to define the coordinates for each corner (point on the outline where the line makes some kind of angle to itself) and there may be a limit to how many corners it can have. Yes, just found it. There might be an easier way, but you can draw your own borders with the api using the polygon method:

https://developers.google.com/maps/documentation/javascript/shapes#polygons

Not all that complicated IF you can find data on the coordinates for the outline of each county. See also:

https://youtu.be/jlJmiFUxv6c

kwood30
03-10-2016, 10:22 AM
Yes sorry, there is so many different programming codes i am getting carried away, I ment Javascript, also Yes i ment part.
I will mess around with abit more html as I think i can edit the drop down abit better. I will aslo look at your links and see what I can also do, so thank you very much.
The counties part is not marker related it is just to focus that particular county when selected.
With regards to colour, It is not to difine different colours at this moment in time, it is juat a colour which I have chosen yellow. What is currently happening with the info window pop up on the placed marker(s) and the supplement window is what I want to this moment, having the date and elapsing time would be great in these windows too, if that can be acheived.
The asign button I have created, I want as part of the supplement window, but once moused over the suppliment window is then displayed with the submited info (in this case the reference number) and if that is then correct on the part of the user, they then click on the assign button that has poped up in the supplement window to change the marker colour to yellow, this then shows that that Marker is now assigned the currect info and the user is happy with that. Does that make more sense?

kwood30
03-11-2016, 01:43 PM
i Have managed to sort some bits out on the county selection side (see my coding below) but it doesn't work, I have incorporated in with the coding in my last but one comment above. If you need the whole lot together just let me know.
I have created kml files for each county i want in my selction on my drop down menu but i can seem to work out how to assing the multipule kml files in my javascript and to get them to work. Can you help with this?


var kmlUrl = 'maps/central bedfordshire' ;
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

function countiesDropdown(container){
var counties = {
"bedfordshire",
"hertfordshire",
"cambridgeshire",
"northamptonshire",
"buckinghamshire"

}
var out = "<select><option value=""></option>";</select>
<select> for (var key in counties) {</select>
<select> out += "<option value="&quot; + key + &quot;">" + counties[key] + "</option>";</select>
<select> }</select>
<select> out += "</select>";
console.log(out);
document.getElementById(container).innerHTML = out;
}

Here is the HTML part.

<div id="menu" style=" position: absolute; margin: 45px 80px;" >
<select id="Counties">
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>

</select>
</div>


Also if you could help m=with my last comment too, I would really appreciate it.

jscheuer1
03-11-2016, 04:31 PM
I've been working in another direction a bit. I became fascinated by the idea of outlining and shading the counties. I found a UK data service that has the 2011 county borders available in KML (among many other formats/types of data on the counties, not all formats have as much positioning/border info as KML, and it's easiest for me to read):

https://census.edina.ac.uk/easy_download_data.html?data=England_ct_2011

And I worked out a way to use that data in Google Maps Polygons:

https://developers.google.com/maps/documentation/javascript/shapes#polygons

The resulting file is much too large (owing to the extremely long lines of coordinates required to draw such complex shapes). But you may view the result here:

http://jscheuer1.com/mapdemos/polydemo/

You can use your browser's 'view source' to copy the code. I got a free api key so that my live demo would be legit. It's domain specific though, so either remove it or replace it with your own. I commented the code to hopefully make it clear, much should be fairly obvious, any questions, just ask.

You should see 5 counties shaded in and if you click on one it will pop up its name. If you uncheck/click on one of them in the checkboxes, that one will go away. Checking/clicking again it will make it return. The demo I worked from uses a slightly different method of initializing the map api, and I prefer it. I'm going to try integrating into it some of the other features soon (particularly the two address one reference marker generator form). I still don't really get what you mean by time or color (well everyone knows what time and color are), more specifically how the user is supposed to experience these on the map/page. Perhaps after I go back over your post a little it may help. Anything more specific you can tell me about those will probably help even more. What do you envision the user experience of time and color to be on your map?

kwood30
03-11-2016, 09:47 PM
Thank you, and I am pleased I have given you a new interest :)
I have mad my own KML files for each county as I made a complete one but it was too big in size. I think what you have done in the demo is great and I will certainly look at putting that code in to my work as needed. I was woundering now how I can encorperate these files I have made or what you have done, to make it work in my doing for the drop down menu?
Also how did you segregate the cordinates for each countie from the KML file, as in mine there are hundreds, as instead of using a KML file could put the in a seperate Javascript file and link it into the coding for the county border lines.

I am building this in stages, so there will be more data/information input to come than just the reference numbers, but trying to take a step at a time for learning perpuses, the general idea for the color will be to place a marker via the location search enter certain amounts of information that can the be shown with that marker. Once the information entered is confirmed to be correct then it can be asigned to the marker and by doing this change the colour of the marker. This will then show to anyother user that that Marker has been assigned the correct information for that location, and a time elapse and date for that assigned information would show too.

jscheuer1
03-11-2016, 10:37 PM
What I'm doing is in stages also, breaking new ground, then going back and incorporating earlier things. I'm already at work at the latter. For one thing, I liked the layout you had at first (HTML + css). It seems to be more mobile friendly, while still being accessible to larger screens. What I did with the counties can work on mobiles, but it requires the user to really know how to manipulate their display before they can get a decent view of what the page is about. Your layout was immediately recognizable to mobiles and only perhaps a little smallish for larger screens, the users of which can simply magnify if they want.

These KML files are interesting and I've already thought it might be possible to read them on the fly for data. The obvious problem though is size. Like if you read in the entire UK counties borders file just to define 1 or 6 counties, you're wasting a lot of time/memory/bandwidth. As I think you have noticed, I've opted for simply cutting out of the master UK counties KML file the coordinates needed for the counties I want, and pasting them into the page that uses them. They could also be in a separate file, especially good if they are to be used by 2 or more pages. I turned them into javascript strings (they were already xml strings anyway) and then ran a function on each one to convert them into Google maps polygon paths arrays. This conversion would be needed no matter where/how the data was stored, unless it was already an array of objects, which - because of formatting requirements would be an even larger file, so just not worth it. It's tempting though to just load up the whole UK counties KML file and use it on an as needed basis to outline any county in the UK. I haven't tried that yet, I suspect it would be a disaster. So I think I'll try other things first.

In a day or so I will have another demo, incorporating some of the earlier things like markers into the outlined counties page I currently have under the previous or similar more mobile friendly layout.

But, and forgive me for repeating myself. I'm still having a hard time understanding what you specifically mean/want from time and color. Have I fulfilled the color requirement with the different colored counties? Or is there more to do with color that you want? And, again, as for time. It seems pretty simple to involve time and/or elapsed time with info in a marker's popup. But I'm still not clear on exactly what you want it to show/tell about time in relation to that marker (or something else?)? Are time and color supposed to be connected in some way or not? Anything more you could say on color and/or time might help me make what you want happen.

OK, here's the latest demo (I've moved the coordinates for the counties to an external javascript file as - now they're being used by two pages). This one has elapsed time for markers and many of the other marker features I think you liked from previous demos:

http://jscheuer1.com/mapdemos/polyplusmarkersandtime/

Again, for me to fine tune the code for you, I need to have a better understanding of what you envision it being like to use the page. I know I keep saying that, but that's how I can understand what you want better.

kwood30
03-12-2016, 04:13 PM
Right, what I have done is created an explination PNG file which will hopefully explain and make more sense to you regarding the colored marker.

5853

I think you have done great with these county polygons. What you have done is slightly different to my general end result but looks great and helps me with my progression in learning. I am trying to create this myself to show you that I am learning lol, But my general plan I to have a permenate fixed overlay on the google map of the county border lines for the UK and the selection menu I have created for the 5 counties is for the perpose of focusing on that particular county once selected.

jscheuer1
03-13-2016, 03:00 AM
One thing I don't like about that picture is having anything to the left of the map. The reason for that is because on mobile devices with small screens, that won't fit. So, ideally everything besides the map should be to the right of it. And I've stuck to that in my latest effort here to otherwise attempt to get as close as possible to what I think you're looking for:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/

That said, if you want to abandon support for mobile/small screen, we can fit a lot more on the page, and have a larger map - like with my first live demo.

Anyways, what I've added is:


Brought back the supplement window so as to see a duplicate of the mouseover infowindow content. I don't get why this is desirable, but you seem to like it.
Moved the button controls and marker selection drop down to the right and up to make room for the supplement window.
Added an "Activate Marker" Button to the button controls and marker selection drop down element. If this is clicked when a marker is selected, it will change that marker's icon to green. A marker may be selected from the drop down list of markers by clicking on its listing there, or by clicking on it in the map.


I'm thinking this should give you everything you need at this point, at least as a sort of template. But, of course, if you have any questions, feel free to ask.

kwood30
03-13-2016, 10:41 AM
This is looking great and getting there thank you, I really appreciate it and I think your a fantastic tutor for me, and I hope you don't mind me saying that.
Are we able cange the county selection from colours to focusing on that particular county and inbed one KML file that I have created (I would add the file for you, but I don't know how to insert a file) to show all the county border lines of the UK? With regard to selecting the county I prefer the drop down menue I created. with postioning the stuff, It is generally designed for use on a computer, but good idea regarding mobile use, but I can change all that through the CSS.
With regard to the asigning the colour to the marker is nearly at what I want, but i want that 'activate marker' button in the supplement window that opens on the mouse over. The idea for this is for if your creating a job loaction for someone to work at, when entering then info to that location checking with the supplement window and assinging the marker to change colour with that info with tell the person that that job is creat to do. This is away to explain why I want it does that make more sense with that explaination?
What you have the time etc is perfect thank you, just would like that shadowed in the supplement windo too. Also is there away of assign the date the marker was assigned too along with the time?
Again I really appreciate your help, I am also trying to do this myself but not getting far, I am nowhere near as talenting and expert at this as you are, and again I really appreciate your help and support.

jscheuer1
03-13-2016, 09:50 PM
I'll give a more detailed response to some of this later. But for now I was just messing around with KML. Unless you want to use a server side language to include or otherwise parse for use the data in KML, the only really useful approach in my opinion would be to fetch it via AJAX as an xml document. It has to be a valid xml document for that to work, but a valid KML documant is also a valid xml document. You could load it in an iframe or object tag and try to access it that way, but this is the sort of thing AJAX was made for, so I lean that way. Here's what I did so far, using jQuery 1.11.1 - I made a request to the 81,173K england_ct_2011.kml file I had downloaded earlier (the downloaded one on my computer, not the one on the UK data service's servers, this should be similar to an AJAX request to file on one's own server, but more efficient), fully expecting that to crash the browser. It took less than a minute, so with a much smaller KML file, it should be faster or similar even if on your remote host. Here's how I made the request:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var thexml;
jQuery(function($){
$.ajax({
url: 'england_ct_2011.kml',
dataType: 'xml',
success: function(response){
thexml = response;
console.log('ready');
}
});
});
</script>

After this was completed the thexml global variable contained the xml nodes of the KML file, and I was able to do this (in the console, but it could be done on the page once the KLM document is read in):


$('name:contains("Luton")', $(thexml)).parent().find('outerBoundaryIs').text();

That (took a little time because it's a huge amount of data) gave the KML formatted coordinates for Luton county. I picked a shorter one, but it also worked for Bedford. Only issue with Bedford is it matched 2 records (Bedford and Central Bedfordshire).

Anyways, if I was doing this on the page, I would have set a variable to that, like:


var LutonCodes = $('name:contains("Luton")', $(thexml)).parent().find('outerBoundaryIs').text();

And then I would be able to later convert them to a Google Maps style paths array of latlng objects.

The main issue here in my opinion is time. But there's another. If you make a slight typo or other digression from strict KML/xml format, your document will be unusable in this and probably any manner other than simply opening it manually and looking at it in an editor. You might be able to parse it server side or with javascript as plain text. But too much inconsistency will make even that fail at least for some things. Also of note here is that if your records are stored differently than in the file I was working with, different tags will need to be queried in perhaps different ways in order to get the information.

All that can be worked out except time. If this is all local it probably will be OK-ish. But there was significant lag, not only in loading the file into memory, but also in reading out the coordinates. Using my method (placing these values as variables in an external javascript file), was considerably faster. Having a smaller dedicated KML file would speed up loading, but probably not the fetching of the coordinates from memory. Even loading would probably take some time if the page was live.

That said, unless you have a server side language like PHP, well in my case PHP, I don't think I want to try this in asp because I have no way to test that. So - say with, PHP it might be faster if that's available. I think it would be (speed - wise) more like copying and reading files right on the server.

When I first looked this up using Google, the method used was to create it as a javascript file as I have been doing so far.

Finally for now, if you want me to look at your KML file, you will probably need to make it into a zip archive and then attach it to a message here using the advanced editor (choose Go Advanced from near the bottom right while posting here then use the controls at the top of the advanced editor to find the attach icon - looks like a piece of paper with a paper clip on it, to attach the file). Hopefully it won't be too big. Or if you have live web space somewhere, just put it there and give me the address to it in a post.

However, if you don't want to outline or shade a county but only want to bring it into view at the center of and filling most of the map. all you need are 4 latlng pairs. One pair each for its Northernmost, Easternmost, Southernmost, and Westernmost points. Once you have those, you could make markers with transparent pins for all four of them, then make a new boundary object, then fit the map to those bounds. A KML file with only that much information would load pretty fast. It would still be faster and easier with a javascript file.

kwood30
03-14-2016, 09:26 AM
Some of what you have said has gone straight over my heard lol but I will re-read untill i get it, as alot of what your are saying is new to me. I have only just taught my sself about these KML files in the last few days.
I agree, I would prefere to have it all in a javascript format, as would be so much easier, but the way all the co-ordinates are set out, like you said, am not sure if it would work and need lots of checking for issues. The KML file that I have created is only just over 3mb, so i will upload that later, as I am still messing aroud with my code, and am hoping to show it to you for your opionions.
I think the idea regarding the 4 latlng is a good idea as i only really want the county to be selected for the map then to show that whole county, the KML file is only for the overlay of all the county borders.
Again thank you so much. I will post some more bits later, but also looking forward to what else you may have come up with

jscheuer1
03-14-2016, 03:12 PM
Right, if you want a shaded overlay and/or an outline of a county, you need a long list of coordinates to form the boundary. But if you just want to focus the map on the county with no highlighting, you only need 4 sets of latlng coordinates. These should be as close to the north, east, south, and west edges as possible, but don't even have to be perfect. There are pages on the web where you can get these by clicking on a map in the approximate locations. You can even add a custom or the generic marker (with an infowindow, if desired) at the center of the county (a 5th set of latlng coordinates).

I was just testing this out. You might as well just have the center of the county because fitting to the bounds will not necessarily get you the optimal zoom, I had thought it would. It will make sure all of the county is visible, but might leave a lot of other territory around the edges. So one would have to set the zoom. That would depend to a degree on the dimensions of the map div, so would be custom. But you can set a custom zoom on a center latlng pair as easily as on 4 bounding ones.

Again these are options only when you want no shading or border.

kwood30
03-14-2016, 09:00 PM
I think that sounds the best way of doing it. I really like what you have done with colours of the county ect so am using that too, but mainly want to work on what I have been asking/talking about from the start. I have got a more understanding of what you said yesterday and have been having ago but have not been successful in getting it to work properly.
I would like to go for your recomendations of the 4 or 5 coordinates for each county as it doesn't matter regarding parts of the other counties aslong as it shows the whole county selected.

Here are the two set of coding i have been messing around with but cannot get them to fully work. As you can see the first one is what you have done, and I have just messed around the CSS side and tried to input the KML file without success (KML is at this link https://app.box.com/s/phnxv2n1cm3o7nssqnptj2sx1u6mnkkl). If you could advise where I have gone wrong I would appreciate it for both this and the next one.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>County Polygons + Markers w/elapsed time</title>
<script src="../fiveenglishcounties.js" charset="UTF-8">
// positioning codes Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk
</script>
<script type="text/javascript">
var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin;
$('#controls input[name="[counties]"]').click(function(){
var poly = pollies[this.value];
if(poly.map){
poly.infowindow.close();
poly.setMap(null);
this.checked = false;
} else {
poly.setMap(map);
this.checked = true;
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'file:///C|/wamp/www/maps/UK County border lines.kml',
map: map
});
}
function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
$('#activatemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setIcon(pinImage);
return false;
}
});
});
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
tm.get(0).size = $('option', tm).length;
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
this.size = $('option', $(this)).length;
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.178227, -0.46013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(8);
}
});
function formatCodes(codeString){
var a = codeString.split(' '), l = a.length, po;
while(--l > -1){
po = a[l].split(',');
a[l] = {lat: +po[1], lng: +po[0]};
}
return a;
}
function initMap() {
pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor);
defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor);
var p;
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 52.178227, lng: -0.4013},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
pollies = {
Bedfordshire: {
paths: BedfordshireCodes,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.15,
latlng: {lat: 52.002974, lng: -0.465139}
},
Bedford: {
paths: BedfordCodes,
strokeColor: '#FFC0CB',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC0CB',
fillOpacity: 0.15,
latlng: {lat: 52.135973, lng: -0.466655}
},
Hertfordshire: {
paths: HertfordshireCodes,
strokeColor: '#FFFF55',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FFFF55',
fillOpacity: 0.25,
latlng: {lat: 51.809782, lng: -0.237674}
},
Cambridgeshire: {
paths: CambridgeshireCodes,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.15,
latlng: {lat: 52.305297, lng: 0.021820}
},
Northamptonshire: {
paths: NorthamptonshireCodes,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.15,
latlng: {lat: 52.272994, lng: -0.875552}
}
};
for(p in pollies){
var polly = pollies[p];
polly.paths = formatCodes(polly.paths);
polly = pollies[p] = new google.maps.Polygon(polly);
polly.infowindow = new google.maps.InfoWindow({
content: p,
position: polly.latlng
});
polly.addListener('click', function(){
if(this.infowindow.map){
this.infowindow.close();
} else {
this.infowindow.open(map, this);
}
});
polly.setMap(map);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV5Sf0iPzrTwgXzOnH1aRYdmqSxm5SCno&callback=initMap">
</script>
</head>


Second half of this piece is on next post as couldn't fit everything on one post due to character limitations, sorry.

kwood30
03-14-2016, 09:03 PM
<body>
<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>
<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >
<form>
<br>
Location 1 <input type="text" class="address">
<br>
<br>
Location 2
<input type="text" class="address">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="submit" value="Submit">
</form>
</div>
<div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;">
<label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br>
<label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br>
<label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br>
<label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br>
<label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label>
</div>
<div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br>
<input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br>
<input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker">
</div>
</div>
<div id="map"></div>
<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div>
</body>
</html>


This next one i have been messing around is the one I am aiming for with the drop down menu. I have tried to use your time elasping without success, but much percistance. I have also tried to attach the same KML file too. I just have not aptempted the county selection as regards to want it how you have said. I really like the remove marker addition that you did and have to tried to replicated it but cannot get it to function. With the activate marker you did aswell for the colour change is perfect but I would like the button to open up in the supplement window when the mouse over the marker is done (if that makes sense) instead of where you have currently put it. I have alread made the button (submit) where I want it but just cannot get it to be hidden like the supplement window until the marker is moused over.



<!DOCTYPE html>
<html>
<head>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var map, geocoder, markers = [];
function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
var up206b = {};
var map;
function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}
up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}
var ctaLayer = new google.maps.KmlLayer({
url: 'file:///C|/wamp/www/maps/UK County border lines.kml',
map: map
});
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];


addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});




</script>
</head>
<body onload="up206b.initialize()">

<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >


<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

<div id="menu" style=" position: absolute; margin: 45px 89px;" >
<select id="Counties">
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>
</div>

</div>


<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">

</div>


<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>



</body>
</html>

jscheuer1
03-14-2016, 10:34 PM
You cannot use my api key. It will only work on my domain. I mention this because I see you have it in your first example page, which also has many other problems.

A response on the KML file you linked to, and then some more observations I've made about positioning a county in the map element since my last post.

OK, at first glance your KML file looks like it's formatted properly (Just checked - it parses like a valid xml document - good job!). But it seems pointless because there are several or more entries (name tags that are part of distinct Placemark opening and close tags each for places like Devon, Dorset, and it looks like many others. But since it's valid - if you know the order or if there are other ways of distinguishing, it might be able to be worked with.

Ideally though, each distinct county or place or whatever - shape, point, or locale that you want to map out in some fashion should have one and only one name tag and that name tag should be the only name tag of a dedicated Placemark tag that bounds all information about that place, shape, whatever.

That said, it's possible you could have - say, Dorset the town, the county, and the region (if such exist), perhaps other designations, or Dorset the line boundary, Dorset the point, and Dorset the 4 bounding points, and other Dorset entries, each having something specifically different about Dorset in them as regards the map or even possible colors, pins, etc. But, even at that, it would be better to have just one Dorset entry, and then have coordinates within that for each different way of defining it on a map, as well as all of the various options for Dorset all in one Placemark tag which has a single name tag in it with the text value of Dorset.

Being a pretty much typically stupid American mostly when it comes to geography, especially in other countries, I don't know all the possibilities. But being at near genius when it comes to coding, I know they should all - if at all possible, be filed under the same tag if they are for the same named place, or even two or more places with the same name - in either case, sub tags within the main tag should be used to differentiate between the various different places of the same name and/or ways of looking at the same place, rather than having more than one main tag for each. But we may be able to work with your file. The fact that it parses is a big plus.

Whew! Said more about that than I intended, but wanted to make sure it was clear. Hope it was, if not, let me know.

Now as to "more observations I've made about positioning a county on a map" - if you know the dimensions of the map element or can even just look at the result on the one you have, it takes only two cleverly chosen points to define the bounds for most counties. Three might be needed in a pinch (but doubtful), four - well only in extreme cases, if at all,

For example, to cue up Central Bedfordshire just about perfectly, just enter into the form these two towns:

1. Oakley, Bedford County, UK
2. Harpendon, UK

The order doesn't matter. As long as they are the only two (no previous markers, or all previous markers removed), that should pretty much center up Central Bedfordshire on the map. So, all you would need are the two latlng pairs of those towns, maybe even tweak a little to make it a better result, create a new bounds object, extend it to just those two latlng pairs, then do a map.fitBounds(bounds); on it, and it will work just fine for that county. A little trial and error and you should be able to come up with latlng pairs for each of your target counties.

kwood30
03-15-2016, 09:10 AM
To start with, I pleased you like my KML is created, and I created as an overlay, so when you open in a KML coverter like QGIS it will show you what it does, which is basically the lines of all of Englands county borders. This is all I want the file to do is draw the lines on the map, not to be used for any thing else. If so would it work that way for that only purpuse, just an overlay i guess.
I concur with your genuis in coding, and I would like to stress my lack of it, and still have a long way to go to even get a basic understand by the looks of thing. I will attempt to re look and the api key issue as to behonest I didn't even think of that, and I will also have ago with the bounds (not that I know what I am doing) but its good for me to learn.
I am still having trouble with the second coding i sent you with it working properly, so there is things I have missed or done wrong, so if you could guid me on those i would appreciate it.
I will hopefully come up with something for you later with regards to the bounds, wish me luck!

kwood30
03-15-2016, 12:53 PM
Right I have had a go and done what I can, the only thing is, I am not sure how tou link them with the drop down menu. I am guessing its through a function of some sort, Onclick mybe, but don't know.
Here is what I have done. What do you think and would I work in my coding above, once the other issues I have with it are sorted too.


//for bedfordshire
var bounds = new google.maps.LatLngBounds();
bounds.extend(52.33, -0.05);
bounds.extend(51.8, -0.8);
var center = bounds.getCenter(52.065, -0.425);
map.fitBounds(bounds)

//for hertfordshire
var bounds = new google.maps.LatLngBounds();
bounds.extend(52.09, -0.35);
bounds.extend(51.59, -0.80);
var center = bounds.getCenter(51.84, -0.225);
map.fitBounds(bounds)

//for Northhamptonshire
var bounds = new google.maps.LatLngBounds();
bounds.extend(52.67, -0.33);
bounds.extend(51.94, -1.35);
var center = bounds.getCenter(52.305, -0.84);
map.fitBounds(bounds)

//for buckinghamshire
var bounds = new google.maps.LatLngBounds();
bounds.extend(52.21, -0.33);
bounds.extend(51.47, -1.33);
var center = bounds.getCenter(51.84, -0.83);
map.fitBounds(bounds)

//for cambridgeshire
var bounds = new google.maps.LatLngBounds();
bounds.extend(52.75, -0.55);
bounds.extend(51.99, -0.53);
var center = bounds.getCenter(52.37, -0.01);
map.fitBounds(bounds)

Also with what you said about the use for your API key. I have just bascily taken out that source link and replaced it with the one I have been useing on my second bit of coding, but I cannot now get the map to load up on the page, everything else does, just not the map. What can do I need to do or what have i done wrong?

jscheuer1
03-15-2016, 05:26 PM
Testing in the console, the center bit seems unnecessary. The latlng's need to be more formally declared, like for Bedfordshire:


bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.33, -0.05));
bounds.extend(new google.maps.LatLng(51.8, -0.8));
map.fitBounds(bounds);

The above code, assuming the map api is already loaded on a page with an initialized visible map, will center up Bedfordshire or actually a combination of what my downloaded UK data file calls Bedford and Central Bedfordshire counties. So, you wouldn't want to run it in the open. It could be a function assigned to the on click to a button or anything else you choose to assign it to.

Now for a moment, back to KML files. I did some testing and investigating. Apparently these files need to be live on the web to work, and that what constitutes a valid KML file doesn't always constitute a valid KML file for use for a Google Maps API KML Layer. I tested the Chicago Transit Authority one that comes with an example on Google. It only worked if it was remote hosted. I couldn't host it on my localhost server, even though it is a valid host for most things (it's an Apache Server running PHP, just not hooked up to the internet - works great for almost everything). If I linked to the CTA file on Github, it worked, or if I uploaded it to my live server (jscheuer1.com) it also worked fine. I also tried your KML file and the one I got from UK Data Services. Neither of those did anything. Well they loaded up and became objects in the console, but read as "INVALID FILE". They're both valid xml files, so could be read that way using AJAX as I mentioned before. They're just not, in their respective current forms, usable as KML layers.

I looked at the actual files, and there are some differences. I'm not sure which are just differences in purpose (the CTA file only drew lines, not polygons) and which are differences in validity as KML layers though. There doesn't appear to be any clear definition of a KML file for a KML layer, or at least I haven't found it yet. There are a lot of examples and information though, just no clear step by step instructions I see, not yet.

kwood30
03-15-2016, 06:59 PM
Right so I basically need to forget about the KML file and having the county border lines as its not going to happen. Thanks for looking and trying anyway.
I was nearly there then with the latlng bounds, so am pleased with my self. I am just struggling to work out how to assaign them to work to my dropdown menu i have created and whether it is best to have the drop down menu work with the html form I have done or a javascript run one. How do I go around this please? (i have added something below, am I close at all with getting the dropdown menu to work, just not sure how to get it to work with the county latlng)
Also have you had chance looking at my two sets of codes that I posted yesterday and to what are causing me the problems? (ignoring the KMLlayer tag now lol)




JS
window.test = function(e){
if(e.value=="bedfordshire"){
alert(e.value);

}
else if(e.value=="buckinghamshire"){
alert(e.value);

}
else if(e.value == "cambridgeshire"){
alert(e.value);

}

else if(e.value == "hertfordshire"){
alert(e.value);

}

else if(e.value == "northamptonshire"){
alert(e.value);

}
}


HTML
<select name="Counties" onchange="test(this);">
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>

jscheuer1
03-16-2016, 02:00 AM
Looks like you're getting the hang of version 4 events there. That code looks workable. But version 5 events are what are mostly used now. jQuery makes these easier to assign. But, for a project like this, there's nothing absolutely wrong with a version 4 event. If that's where you're at with understanding javascript events, then maybe that's how you should write it. I have a blog post on the differences between version 4 and 5 events you might find interesting though:

http://www.dynamicdrive.com/forums/entry.php?255-Version-5-Events

We really no longer need to concern ourselves with IE 8 and less fortunately, and the last bit about detecting previously assigned events isn't relevant to our current discussion. I would add here, that with jQuery, one can do:


$('#someid').click(function(){
alert(this.value);
});

where someid is the id of the element you want to listen to for a click. This works even in earlier browsers like IE 8 and less as long as the main jQuery version number is 1.

To make matters a little more complicated though, the Google Maps API has it's own syntax for assigning events to markers and other things (like polygons) that appear on a Google Maps API map. Fortunately this syntax is pretty similar to the jQuery and standard model ones, so isn't all that hard to pick up once you understand jQuery or the standard event model.

OK, enough of that. Using what you are doing for actual elements on the page is fine though, especially if it's a dedicated page that others will not be editing too much. Just thought you might like to know some of what all this other code is about.

More on the KML file you made. Even though it cannot be read in as a Google Maps API KML layer, the information in it (if it accurately represents the polygons for the counties) can still be accessed and used to make county outlines. More on that later, after I test to see what I can make it do in that regard.

kwood30
03-16-2016, 03:29 PM
Right I am now really struggling to do this, without success. this is what I have done, but am not sure now how to link them together to work.


<!doctype html>
<html>
<head>

<script type="text/javascript">

document.getElementById('counties').addEventListener('click', function(e) {alert(this.value); e.preventDefault();}, false);
$('bedfordshire').click(function(){
alert(this.value);
});
$('buckinghamshire').click(function(){
alert(this.value);
});
$('cambridgeshire').click(function(){
alert(this.value);
});
$('hertfordshire').click(function(){
alert(this.value);
});
$('northamptonshire').click(function(){
alert(this.value);
});

//bedfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.33, -0.05));
bounds.extend(new google.maps.LatLng(51.8, -0.8));
map.fitBounds(bounds);

//buckinghamshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.21, -0.33));
bounds.extend(new google.maps.LatLng(51.47, -1.33));
map.fitBounds(bounds);

//cambridgeshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.75, -0.55));
bounds.extend(new google.maps.LatLng(51.99, -0.53));
map.fitBounds(bounds);

//hertfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.09, -0.35));
bounds.extend(new google.maps.LatLng(51.59, -0.80));
map.fitBounds(bounds);

//northamptonshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.67, -0.33));
bounds.extend(new google.maps.LatLng(51.94, -1.35));
map.fitBounds(bounds);


</script>

</head>
<body>
<select id="Counties" >
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>

</body>
</html>

Also I am really struggling with getting your coding you did with the colour counties to work with a different google api source, see my code in the previous post for this. Please help.

Also here is a KML link that you might find helpful, if you didn't know already https://developers.google.com/maps/tutorials/kml/

kwood30
03-16-2016, 06:05 PM
I think I might have done it, what you think? Have i?


document.getElementById('counties').addEventListener('click', function(e) {
switch(e.target.value){

case 'bedfordshire':
bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.33, -0.05)); bounds.extend(new google.maps.LatLng(51.8, -0.8)); map.fitBounds(bounds);
break;
case 'buckinghamshire':
bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.21, -0.33)); bounds.extend(new google.maps.LatLng(51.47, -1.33)); map.fitBounds(bounds);
break;
case 'cambridgeshire' :
bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.75, -0.55)); bounds.extend(new google.maps.LatLng(51.99, -0.53)); map.fitBounds(bounds);
break;
case 'hertfordshire' :
bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.09, -0.35)); bounds.extend(new google.maps.LatLng(51.59, -0.80)); map.fitBounds(bounds);
break;
case 'northamptonshire':
bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.67, -0.33)); bounds.extend(new google.maps.LatLng(51.94, -1.35)); map.fitBounds(bounds);
break;
}
});


<select id="counties" >
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>

jscheuer1
03-17-2016, 01:52 AM
Hey! if it works. That won't work on IE 8 and less, but almost no one uses that any longer. And you cannot run the javascript code you have there until after the browser parses the select, but - if it's working, then you already have that part correct. If it's not working, you're very close, let me know.

OK, I've had a chance to look some more at the KML file you made. If I load it up using AJAX and grab the coords for Buckinghamshire from it to make a polygon, it looks like it could be right. I skipped Cambridgeshire because we already have a working outline for that. Next I went to Cumbria. That looked wrong, there were gaps at odd sharp angles within the area demarcated. That's I think because there are 11 entries in the file for Cumbria and some of the cords wrap back upon themselves. Since I saw no logical way to use them other than to just take them all in order, that's just what I got. Perhaps removing duplicate coordinate entries would solve that, like if there were 2 identical latlng pairs, skip the second one. Although, one might need to round to find all of the relevant duplicates, and even that might not work. I'll see if the UK data service file I have has an entry for Cumbria and - if so, if that's any better. One other thing (for now) I noticed in your KML file is that all of the coordinate tags look to be (I didn't check them all) children of LineString tags. In the UK data service file, they are all children of Polygon tags. When reading the file in via AJAX this doesn't really matter. However it does tend to indicate that perhaps you were thinking more in terms of lines than shapes. I have no idea if that's true or not, just something to ask yourself.

kwood30
03-17-2016, 11:21 AM
I will have a play now with that coding and will get back to you how it works, if i does lol.

If you download the free QGIS desktop application this is where I made the KML file from SHP files. If you open my KML in that software it will show you exactly what it should like on the map it is line that I want, actually I will add a screenshot for you, might be better. Still worth alook at the software tho?

5858

I am still having problem getting the code you created with the colour of the counties to work. Again I am going to try a bit more, but if you have any input on that I would appreciate it.

kwood30
03-17-2016, 10:22 PM
So been working hard today on this but have still not managed to have any luck. Here are the links to three different versions for the dropdown menu I have created but still cannot get them to execute. Can you help please? Also with which ever one your able to get working, Can you also get the remove marker and the time elapse you did on your latest one to work too please. Could also do with that assign button functioning the colour change of the marker aswell.

https://app.box.com/s/i229x3r2k4pnl5bn41gt8dj5b03dna2i
https://app.box.com/s/ml8bj4fq21aabcai15j213qi0amaf03o
https://app.box.com/s/23717qesthf6xmo1tlnr2uk2eabqv9ty

Onto the KML files. I might have had a break through with some working ones, so please give them a try or even a look as their coding. I have two different one's, one with lines and the other with colour polygons. I have also put them into a KMZ file which is a ZIP form of the KML and will also work through the KMLlayer in google api.

https://app.box.com/s/u49d2ux0fv5k97rsr1vkg0vjeowzahb7
https://app.box.com/s/s3wkikysguk6wsfj0emfqcummpinj1h8
https://app.box.com/s/untupzr0o5zqkzuuydery01ub77k11gp
https://app.box.com/s/89ow22o1zmpwqmutkrq6adpyv1v66v5g

I have also attempted to rectifiy the issue I have been having regarding what you created, to work for me. I have noticed that one of the links is a file:/// source hence why I can't access it. On one version I cannot get the map to load and on my other attempt I have loading the map but none of the functions work, mainly the colour counties you did.

https://app.box.com/s/kfz4mc7meipx3qtffvf6ieut7noiuj9z
https://app.box.com/s/v4s1nismbru8amxg50drbfxjck7jdtu1

As you can see I have been really busy and have really tried on all these. So would really appreciate your help on each I you don't please. Thank you

jscheuer1
03-18-2016, 04:00 AM
I think I may be able to work with your file. I've been working with the UK Data Services file, and am seeing what multiple sets of coordinates for a given location (county in this case) are sometimes for (sometimes one can often use just one, or a few, rather than all sets, sometimes you need them all). I really cut down of the size of the UK Data Services file and will be looking into alternate ways to present and/or load its data. But for now I have a clunky yet workable version - takes awhile to load. I got 3 minutes 18 seconds here, but it may take a good while longer for you. Before I trimmed the file it was over 6 minutes, what you experience will be in part due to your bandwidth to my server (it's in Dallas TX). Have a look, just be patient while it loads:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/indexmoukkml.htm

Also, for you or anyone interested this probably has to be viewed on a desktop, laptop, or large tablet. There's just too much stuff to easily fit on a small screen like a phone, etc.

kwood30
03-18-2016, 10:40 AM
Its looks good. I really like all the different colours for the counties. And that is using Ajax? Is that part of Javascript of a completley different thing? It took a while to load like you thought but wasn't too bad. There is a whole list of the counties to tick or untick for the colour to be moved. Is that it should do?

Did you look at the other KML and KMZ files I linked you too as they may be of easier use?

Did you also look at my other coding docs, as I am really stuck with getting each to work. Please can you help with them?

jscheuer1
03-18-2016, 04:07 PM
I'm kinda busy, but I'll wade through all of this probably over the weekend. I just made up a rough demo using your kml file, the one you originally gave me. Since it had lines instead of shapes, I used them as lines (I tried shapes at first, but there was too much criss crossing of lines). There's no way to turn them on and off right now. But I know there's one, I just wanted to see how it looked first. Also, the code is from another demo, so is a little messy, has stuff that's not aptly named in it, and some code I'm not sure yet if I will keep or not for this particular demo. There do seem to be few stray lines, but mostly it looks pretty good, and because your file is smaller in byte size, it loads up pretty quickly by comparison:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/outline2.htm

It also uses AJAX. Which is sort of a part of javascript. AJAX stands for asynchronous javascript and xml. Which is a little more limiting than what all it can do, and a little less than fully descriptive. It allows you to make a request to the server for a file. Many different file types may be requested, not just xml. But if it is a valid xml file you are requesting and you want to parse the result as a document tree, you may. That's what we are doing here. Once we have the tree, we can find all the tags, their relation to one another and each one's attributes and text contents. To do this, in most cases you need to know the structure of the particular xml file you are using. All we are doing in these demos is grabbing all the Placemark tags and then using the text values of the child 'name' and 'coordinate' tags from each one as strings in the rest of our code.

Oh, yeah, and - with previous demo, with the different colors, yes you can tick each one off and on, and clicking on one should pop up its name.

kwood30
03-18-2016, 04:54 PM
Ok thank you.
You will be pleased to know that I have finally manged to get the select county menu to actually work and do what it should do aswell, so am really pleased with that. I am now trying to incoperate the time and date elapse and also the assign(activate) of the colour marker(as these are part of the main design I need). But as you can see below, am having some difficulty. This is what I want to combine everything into what you see below. So you haven't got to, if you don't want to look through all the other ones. All i really need is what I have acheived here, with the time and date elapse, assigned colour to marker and the county border overlay(but that is not a worry if we cant do the overlay) Any thoughts?


<!DOCTYPE html>
<html>

<head>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),

fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {

var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}

var up206b = {};


var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();


$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});



</script>
</head>
<body onload="up206b.initialize()">

<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>

<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >


<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

<div id="menu" style=" position: absolute; margin: 45px 89px;" >

<select id="counties" >
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>
</div>

<script type="text/javascript">
$("#counties").on("change",function(){
var cnt=$(this).val();
var bounds = new google.maps.LatLngBounds();
switch(cnt){
case "bedfordshire":
bounds.extend(new google.maps.LatLng(
52.22, -0.41));
bounds.extend(new google.maps.LatLng(51.8797, -0.4176));
break;
case "buckinghamshire":
bounds.extend(new google.maps.LatLng(52.18, -0.83));
bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431));
break;
case "cambridgeshire":
bounds.extend(new google.maps.LatLng(52.29, -0.13));
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
break;
case "hertfordshire":
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
bounds.extend(new google.maps.LatLng(51.8031689, -0.208661));
break;
case "northamptonshire":
bounds.extend(new google.maps.LatLng(52.492298, -0.684233 ));
bounds.extend(new google.maps.LatLng(52.09, -1.03));
break;
}
map.fitBounds(bounds);

})



</script>


</div>


<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">

</div>


<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>



</body>
</html>

Also, I have managed to find all the countie with just the coordinates for the county lines only. If you open each txt file you will see that the latlng are paired up perfectly. Would this be better for you to use? See what you think. https://app.box.com/s/7xgvav6gc63si2ktgj2gu4ohfzzoau11

jscheuer1
03-18-2016, 09:33 PM
OK. And a quick note, I just went back to look at the image you posted from qgis (which I have BTW, but I only downloaded it for this project and abandoned it mostly after I discovered the pre-made KML files on the UK Data Service and other data service sites, so have little familiarity with it). The extra lines (or what I was seeing as extra lines) I was mentioning when I used your file in the latest black outline demo appear in your image as well, so they're what you programed/drew into your KML file. I'm pretty sure I can make each county's full slate of lines able to be ticked on and off and even to have each for a given county have a color, rather than all being all black. That will take some extra coding, and I want to also simplify/streamline the code for that demo. When I have something on that, I will post it here. Also, on my latest color demo, I have worked it out to alphabetize the ticks. I haven't uploaded that yet though, but, since that part is easy, once we have ticks for your KML file, I can do that for them as well. One other thing for now, I've discovered that the coordinates used in these files are carried out to the 11th or 12th decimal place. By dropping (not even rounding) the extra places beyond 4, generally the size of the file can be more than cut in half (which speeds up loading), and the loss of visual accuracy, if any, is (at least for now, for me) impossible to detect.

kwood30
03-19-2016, 05:13 PM
The files I added for you above are very small, so might worker better on what you are trying to acheive. I like the idea of what your working at and will look really good once completed.
The black lines is all I want as an overlays as it just defines each county as I have the counties i need to focus in on, on selection. But what you are doing is good too. What would be really good is instead of having it as a tick box format, you do what i have done and put them in a dropdown menu. I understand that the dropdown menu can be created in Javascript so I'm sure that would be easy for you.

jscheuer1
03-20-2016, 03:39 PM
I looked at two more of the KML files - one wouldn't make good looking polygons or outlines, the other wouldn't load as valid xml.

Anyways, I think I get mostly what you are looking for now. I also took the original KML file you had, the one that worked pretty well for outlines, and using some of what I learned cutting down on the UK Data Services file, cut that about in half so it loads pretty quickly now. Using that file, I made up this demo:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/outline5.htm

If you select from the drop down of counties, the map will center on that county. The method I used is to take the coordinates used to make the outline, create and extend a new bounds with them, then map.fitBounds to that. Now in some cases you might want to zoom in by one after that (I think that's because sometimes the map doesn't realize it can and not lose the bounds and/or because there might be one or more stray coordinates in that county's definition which, although not obvious on the map, lies outside the county's apparent outline. Sometimes (very rare) you will need to zoom out by one. I have no idea why that happens. I think it only happened once to me. Maybe the map stepped on the zooming "brakes" too late. That's how it looked anyway. Most of the time though it's fine. When you set a marker or markers, the counties drop down resets, and the bounds are set to the marker(s), but there's a record of the last county selected right beside the drop down. If while there are markers you pick a county, you will get centered on that county. Using one of the marker functions after that will, unset the county again, center on the marker(s) whatever was chosen there, but again, the last selected county is recorded as a reference.

kwood30
03-20-2016, 07:39 PM
Thats great thank you looks really good. I have been working around your script and have done some menu selcting too but only for five counties. I'll upload the files for you to have a look and see what you think. I am also looking at trying to fit the overlay using a js instead using all the coordinates. I know abit long winded but might load quicker etc.
Would you mind letting me acces to that my KML file you adapted please so I can have ago myself with it to see if I can inbed it to this one of yours I have adapted.
What do you think?
https://app.box.com/s/nhqyj0x2rsp0qeqrooth3698cfcb8du8 - attached js file
https://app.box.com/s/kfz4mc7meipx3qtffvf6ieut7noiuj9z - coding to attach js file with

jscheuer1
03-20-2016, 08:48 PM
Still busy, but here's your modified KML file (the shortened version of the original one you provided that I used in the latest demo - it could be had by looking at the source code of the demo, it's the url value for the $.ajax call). I'm sure you will see that now that I've just told you, but just in case that's still a bit of mystery, here's a direct link to it (right click and 'save as'):

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/kwoods.kml

In some browsers, just clicking on it will initiate the download. If not, as I say - right click and 'save as'.

kwood30
03-20-2016, 09:13 PM
Thats great thank you. I noticed that Bedfordshire is missing in the dropdown menu you created in your last demo. I understand if your busy I just wanted you to see what I had done to show you that I am slowly learning from you and with your help.
With regards to creating a JS file for all the latlng for the county border lines is no point as the size of the file would be massive and the loading time rediculous. Just thought to point that out lol

jscheuer1
03-21-2016, 03:10 AM
What's in the drop down is what's in the KML file. I'm thinking, unless I took it out for some reason (not intentionally) or it's there and is just not getting read (again for some reason), um I think you just didn't have it there in the first place. I noticed other things missing - Cornwall for example. Many others. Some of this was due to you using larger (legislative perhaps) regional areas to designate several ceremonial counties, but some of it just looked to me as though you skipped areas that were outlined already by virtue of being between other areas that were already specifically included. This last is what I think is the reason so many areas have no mention in the file, and one of the reasons it's so small.

Not to worry. I've been working on the UK Data Service file. The one that was originally a bit over 80 thousand K. I have it down to about 4,243 K. It doesn't load as fast as your slimmed down file, but it's pretty quick, allows for colored polygons and popup labels on click of a county on the map, as well as a much more comprehensive drop down list. I think I may be able to improve on it some more, but for now, let me know what you think:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/indexmoukkmld.htm

The polygons could be just outlines, all black at that. But, since there's information for shading (unlike the previous black line demo), why not use the colors?

Oh, one other tidbit I noticed earlier about these demos - if you use the Google Chrome browser, generally things seem to load up faster. I think that's because it's a Google API, so the Google browser handles it better - makes sense.

kwood30
03-21-2016, 09:32 AM
Looks really good thank you. Again could I have that fill too please. Through the source code it does not allow me to click on it down download.
I am really greatful for what you have done. It is as I said looking really good.
With regards to just black lines like you said, what would I need to do to make that happen (just to compare the difference as that was my general first idea)
Thanks again

jscheuer1
03-21-2016, 04:43 PM
OK, I just updated it slightly to include a button which can toggle all of the overlays off and on. I also made a slight change so that there's a timeout holding back the writing of the drop down list to the page, this should make the overlays appear first, while the "Loading . . ." message is still being displayed. Might add a second or two overall, but worth it for esthetic's reasons I think. I also added cache: false to the $ajax call. That's because I had been playing with the imported file a lot and wanted to make sure the latest version was always used. If you change that to true, it should (well could) speed up loading considerably on repeat loads. Here's the direct link to the KML file:

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/england_ct_2011.kml

I knocked it down a little more, not much. I had seen this big rectangle coming out of Bristol. I assumed it was either an error or a shipping lane, so I had taken it away. But later I noticed that most of the other counties that border large bodies of water had some inclusions there of those bodies in their borders, I guess for recreation, and/or commercial use. Since Bristol is I believe a major port, it would make sense that they have jurisdiction over this part of the waterway, so I put it back. This actually made for a smaller footprint in the file while at the same time a larger one on the map. That's because I didn't have to be as careful of my edits when compressing it's coordinates. If you want the version without that waterway annex for Bristol, let me know. I still have it and it's only like 20 K or less larger. But the more I think about it, I think having it there is more accurate.

kwood30
03-22-2016, 09:51 AM
Thank you. I really appreciate all your help with this. Its brilliant, wish I could do all this with as ease as you. Hopefully one day I will with your help and guidence. If you don't mind of course?

Could I please have the link to your updated version, as I looked at your last link and could not see the 'toggle on/off' button? Thank you again :)

jscheuer1
03-22-2016, 09:06 PM
It's there (the last address I gave - pretty sure):

http://jscheuer1.com/mapdemos/polyplusmarkerstimeandactivate/indexmoukkmld.htm

You may have to refresh the page though, maybe not now, enough time has passed. (Also, be aware, my host has some latency sometimes - that is the server itself caches outgoing pages, this usually doesn't last for very long though)

I also updated the kml file, same address - clear your cache before trying to download it again. - fixed an issue where the the popup for Hackney in London was appearing far north and a bit to the West in I think Lincolnshire (or maybe Derbyshire - either way, far off the mark). Seems there's also a place named Hackney there as well. So I changed the name in the data file from "Hackney" to "Hackney County London", that fixed it. There were a few others like that, but I took care of them a while ago. There might be more. I've also been going through the map checking for other problems like that and setting colors differently in cases where two adjacent counties are the same color. No way of knowing if I have them all yet, but it's likely that there are not too many more left. I'll keep updating the file if and when I find more and/or find other improvements.

kwood30
03-23-2016, 09:43 AM
Brilliant, Looks great, Thank you soooo much for your help on this, much appreciated.
I am sure, I will have some more projects soon lol the best way to learn. If you'll be happy to help if/when I do I waould appreciate it.