Page 4 of 5 FirstFirst ... 2345 LastLast
Results 31 to 40 of 48

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

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

    Default

    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?

    Click image for larger version. 

Name:	KML file.jpg 
Views:	66 
Size:	19.8 KB 
ID:	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.

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

    Default

    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
    Last edited by kwood30; 03-17-2016 at 10:28 PM. Reason: Typo!

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

    Default

    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/polypl...dexmoukkml.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.
    - John
    ________________________

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

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

    Default

    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?

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

    Default

    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/polypl...e/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.
    - John
    ________________________

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

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

    Default

    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?

    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 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
    Last edited by kwood30; 03-18-2016 at 04:59 PM. Reason: add more text

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

    Default

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

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

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

    Default

    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.
    Last edited by kwood30; 03-19-2016 at 05:32 PM.

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

    Default

    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/polypl...e/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.
    - John
    ________________________

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

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

    Default

    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

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
  •