Using map as input device for other field?

Home Forums MapPress Support Using map as input device for other field?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #11217
    Gertkok
    Participant

    I’d like to use a Mappress map to let a user click at a location, and have the latlng coordinates pasted into a text field (probably on a Formidable Pro form, although I am not shure those forms have fields with id’s)

    The subject is area in free nature, so no street addresses are involved.

    Can this be done, what are best practices regarding MapPress (inclusion of Javascript, use of events, names)

    #11222
    Chris
    Keymaster

    Hi, the plugin doesn’t support anything like that.  You could hook into the save action and extract the data from the map as it is being saved.  The plugin call this action when a map is saved, with the mapid that was saved.

    do_action('mappress_map_save', $mapid);

    You can use this to retrieve the map:

    Mappress_Map::get($mapid)
    #11224
    Gertkok
    Participant

    The usage of entering formfield-data is by a website’s visitor, at the frontend of the site. The formdata are saved, not the map. Using click-events is defined in the GoogleMaps API.

    I think I will place Javascript in my functions.php. Can I assume the id: ‘mapp0_layout’ if there is only one map on a page?

    #11231
    Chris
    Keymaster

    Hi,

    The map id is “mapp0” if there is one map on the page.  Then second map is “mapp1” by default, and so on.  The div containing the map also has the id “mapp0”, and the various layout parts are prefixed with that name, e.g. “mapp0_layout”, “mapp0_directions”, etc.

    You can also specify a name in the shortcode using the name parameter, e.g. name=”mymap”.

    #11246
    BradSiegfried
    Participant

    I use both Formidable and MapPress and would be interested in doing exactly what Gertkok describes.

    Gertkok, please post back and let me know how your plan works out.  Any pointers would be appreciated.

    Thanks.

    Brad

    #11252
    Gertkok
    Participant

    It is almost working, I miss initialisation when the form is shown (see last line )

    To be done: add default positions when browser has no navigator.geolocation
    ————————————————————————————-
    This is content of a Formidable HTML element:

    <div id = “wida_map” style = “width: 100%; height: 300px”></div>
    <br>
    <input type = “Button” value = “Home Position” onclick = wida_homePosition() “/>
    <script type=”text/javascript”>
    //<![CDATA[
    var wida_latId = ‘field_hdmyac’;
    var wida_lngId = ‘field_52snxh’;
    var wida_mapId = ‘wida_map’;
    //]]>
    </script>
    9(another possibility is make a field like:
    <type input = “hidden” id=”wida_identifiers” value=”wida_latId=field_hdmyac&wida_lngId=field_52snxh&wida_mapId=wida_map”>
    Which may be a littlebit more easy for some Formidable developers, but then the Javascript should decode this string

    ————————————————————————————-

    Add 2 custom fields to the post type , type of the custom field is numeric
    create at least one post of this type to make this fieldnames visible for MapPress and Formidable:

    latitude
    longitude

    ————————————————————————————-

    Make 2 fields on the Formidable form that will be entered in this custom fields latitude and longitude

    Config MappPress to use these custom fields for automatic generating a map with the fields

    —————————————————————————————-
    This is added to the functions.php of the theme to include javascript.
    Probably it can be do

    If you have a google api key replace FILL-KEY-HERE with the key

    function my_scripts_method() {
    wp_enqueue_script(‘GoogleApis’, ‘//maps.googleapis.com/maps/api/js?key=FILL-KEY-HERE&sensor=false’);
    wp_enqueue_script(‘wadi_GeoLocate’,
    ‘www.watisdatdaar.nl/y/wp-content/themes/watisdatdaar/js/geolocate.js’,
    get_stylesheet_directory_uri() . ‘/js/geolocate.js’,

    array(‘GoogleApis’),

    );
    }
    //wp_enqueue_scripts

    if (!is_admin()) add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);
    —————————————————————————————-
    geolocate.js

    /* Id’s as entered on the Formidable Form
    var wida_latId = ‘field_hdmyac’;
    var wida_lngId = ‘field_52snxh’;
    var wida_mapId = ‘wida_map’;
    */
    var wida_map;
    var wida_marker;

    function wida_homePosition() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(wida_successHandler, wida_errorHandler);
    }
    }

    function wida_successHandler(location) {

    // Combine from raw json: latitude and the longitude;

    var lat = location.coords.latitude;
    var lng = location.coords.longitude;

    var myLatLng = new google.maps.LatLng(lat, lng);

    if (!wida_map) {
    wida_initialize(myLatLng);  // Called on first usage (is homeposition at startup)
    }
    wida_placeMarker(myLatLng);

    }

    // report errors to user
    function wida_errorHandler(error) {
    switch (error.code) {
    case error.PERMISSION_DENIED:
    alert(“Could not get position as permission was denied.”);
    break;
    case error.POSITION_UNAVAILABLE:
    alert(“Could not get position as this information is not available at this time.”);
    break;
    case error.TIMEOUT:
    alert(“Attempt to get position timed out.”);
    break;
    default:
    alert(“Sorry, an error occurred. Code: ” + error.code + ” Message: ” + error.message);
    break;
    }
    }

    function wida_initialize(latLng) {

    var mapOptions = {
    zoom: 10,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    wida_map = new google.maps.Map(document.getElementById(wida_mapId), mapOptions);
    wida_marker = new google.maps.Marker({
    map: wida_map
    });

    google.maps.event.addListener(wida_map, ‘click’, function(event) {
    wida_placeMarker(event.latLng);
    });

    }

    /*
    * onClick handler for GoogleMap on the invulformulier, also used by wida_homePosition
    */

    function wida_placeMarker(latLng) {

    wida_marker.setPosition(latLng);
    wida_map.setCenter(latLng);

    wida_setNumbers(latLng);
    }

    function wida_setNumbers (latLng) {
    document.getElementById(wida_latId).value = latLng.lat();
    document.getElementById(wida_lngId).value = latLng.lng();
    }

    /* looks like this is not called yet */
    google.maps.event.addDomListener(window, ‘load’, wida_homePosition);

    #11253
    Gertkok
    Participant

    field_hdmyac and field_52snxh are keys of the Formidable fields.

    wida_map is the id of the <div>

     

    //<![CDATA[
    var wida_latId = ‘field_hdmyac’;
    var wida_lngId = ‘field_52snxh’;
    var wida_mapId = ‘wida_map’;
    //]]>

    #11254
    BradSiegfried
    Participant

    Thank you, Gertkok, for sharing and explaining.  Your example will be an excellent learning opportunity for me.

    #11256
    Gertkok
    Participant

    I replaced the last line of geolocator.js:

    google.maps.event.addDomListener(window, ‘load’, wida_homePosition);

     

    with these 3, which give me a better result. The map is shown at the page.
    jQuery(document).ready(function() {
    wida_homePosition();
    });

     

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.