Page 3 of 5 FirstFirst 12345 LastLast
Results 21 to 30 of 48

Thread: Assigning entered times to marks that are colour coded for time frame

  1. #21
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <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.

    Code:
    <!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>

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-15-2016 at 03:23 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #23
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #24
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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.
    Code:
    //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?
    Last edited by kwood30; 03-15-2016 at 05:25 PM. Reason: Adding last paragraph

  5. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Testing in the console, the center bit seems unnecessary. The latlng's need to be more formally declared, like for Bedfordshire:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #26
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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)

    Code:
    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>
    Last edited by kwood30; 03-15-2016 at 10:23 PM. Reason: added some code

  7. #27
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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/e...rsion-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:

    Code:
    $('#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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #28
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    <!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/
    Last edited by kwood30; 03-16-2016 at 03:31 PM. Reason: add link

  9. #29
    Join Date
    Feb 2016
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    I think I might have done it, what you think? Have i?

    Code:
    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>

  10. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Enlarge a pop-up window that is hard coded in the template
    By GreenGiant in forum Looking for such a script or service
    Replies: 10
    Last Post: 06-26-2012, 03:56 AM
  2. Replies: 2
    Last Post: 07-19-2010, 01:44 AM
  3. Replies: 14
    Last Post: 03-10-2009, 07:36 AM
  4. Replies: 2
    Last Post: 05-20-2007, 02:29 PM
  5. Replies: 6
    Last Post: 02-07-2007, 07:31 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •