yogiben / meteor-autoform-map Goto Github PK

View Code? Open in Web Editor NEW

25.0 2.0 42.0 213 KB

Google maps input for Meteor Autoform

JavaScript 9.60% CSS 10.48% HTML 10.35% CoffeeScript 69.57%

meteor-autoform-map's Introduction

Autoform map

Edit location coordinates with autoForm.

Setup

Install meteor add yogiben:autoform-map
Define your schema and set the autoform property like in the example below

Schemas = {}

@Cities = new Meteor.Collection('cities');

Schemas.Cities = new SimpleSchema
	name:
		type:String
		max: 60
		
	location:
		type: String
		autoform:
			type: 'map'
			afFieldInput:
      				geolocation: true
      				searchBox: true
      				autolocate: true

Cities.attachSchema(Schemas.Cities)

Generate the form with {{> quickform}} or {{#autoform}}

e.g.

{{> quickForm collection="Cities" type="insert"}}

{{#autoForm collection="Cities" type="insert"}}
    {{> afQuickField name="name"}}
    {{> afQuickField name="location"}}
    <button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}

Coordinates will be saved as string in format latititude,longitude. Alternatively it can be an object. See schema below:

Schemas.Cities = new SimpleSchema
	location:
		type: Object
		autoform:
			type: 'map'
			afFieldInput:
				# options
	'location.lat':
		type: String
	'location.lng':
		type: String

Or if you want to save lat and lng as a number:

Schemas.Cities = new SimpleSchema
	location:
		type: Object
		autoform:
			type: 'map'
			afFieldInput:
				# options
	'location.lat':
		type: Number
		decimal: true
	'location.lng':
		type: Number
		decimal: true

Or if you want to save lat and lng as a array, important for GEOJson:

Schemas.Cities = new SimpleSchema
	location:
		type: [Number]
		decimal: true
		autoform:
			type: 'map'
			afFieldInput:
				# options

Options

mapType type of google map. Possible values: 'roadmap' 'satellite' 'hybrid' 'terrain'

width height valid css values for width and height attributes of map. Default width is set to '100%' and height is '200px'

defaultLat default latitude defaultLng default longitude

geolocation enables or disables geolocation feature. Defaults to false

searchBox enables or disables search box. Defaults to false

zoom zoom of the map. Defaults to 13

autolocate if set to true will automatically ask for user's location. Defaults to false

googleMap google maps specific options.

rendered function called when map is rendered. google.maps.Map will be passed as an argument.

reverse if set to true lat.lng will be reversed to lng.lat. Works only with strings.

	location:
		type: String
		autoform:
			afFieldInput:
				type: 'map'
				mapType: 'terrain'
				zoom: 8
				geolocation: true

meteor-autoform-map's People

Contributors

Stargazers

Watchers

meteor-autoform-map's Issues

Please update to latest autoform

Right now, meteor-autoform-map requires autoform 4.2.2, which means we're stuck with bugs in autoform 4.2.2 that we'd rather not have.

How do you feel about just depending on autoform 4? I understand that there are tradeoffs with that, but I suspect the rate at which autoform updates is going to be much higher than the rate at which autoform updates and breaks meteor-autoform-map.

Touch events do not work from mobile

Has anyone found a workaround to get this to work on a mobile device? Selecting the address from a list does not work

Default location / zoom

If we don't know where the user is the default location should be the whole world (as much as I like australia ;) )

Option for autocomplete address field

When option set to true, field appear with search capabilities

e.g. http://www.doogal.co.uk/LatLong.php

Map options not taking effect

Hi,

I've been using a basic autoform-map successfully (thanks!), however I can't seem to get any changes from adding map options. Example below is ensuring searchBox is turn off, but the search box is always rendered (I know it is supposed to be off by default):

{{#autoForm id="viewUserProfile" schema="Schema.User" doc=currentUser type="readonly"}}
{{> afQuickField name="profile.location" width="125px" height="75px" searchBox=false zoom=4 label=false}}
{{/autoForm}}

Also not had luck trying to include other API options such as 'disableDefaultUI'. Can you provide a simple example or are they not possible as it stands?

Options on afQuickField

Hello,

Is there a way to have options on the afQuickField, to have something like this :

And then a helper like this:

Template.templateTest.helpers
mapOptions:->
{
mapType:'roadmap'
width:'200px'
height:'200px'
defaultLat:57.15075513030167
defaultLng:-2.1279549163819134
searchBox:true
zoom:12
}

Kind regards

afFieldInput

Hi!

I'm trying to use the form with a schema defined in Collections2 and most of the afFieldInput items don't seem to be working for me. Here is what I've put into my collection:
startLocation: {
type: String,
autoform: {
afFieldInput: {
type: 'map',
mapType: 'terrain',
zoom: '8',
searchBox: true,
width: '50%',
defaultLat: '46.073',
defaultLng: '-100.546',
geolocation: true,
}
}
}

The width, searchBox, and geolocation seem to work but I'm not getting the proper zoom or centering based on Lat Lng.,

An example on how to use the googleMaps option to specify the options would be great too.

Thanks for a great tool!

Google Maps API error: MissingKeyMapError

Hi!
Have this error after map rendered
From docs: https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
Is any way to set my existing api key?

Loading indicator on location

When user's position is being calculated, there is a delay.

The icon should be replaced by

fa fa-spin fa-circle-o-notch until position is found

Improvement: Save location as an Object with lat and lng instead of a string

Having { lat: 30, lng: 60} instead of '30,60' would be nice.

[enhancement ] Are you planning to add google autocomplete input field ?

Hi, I asked that because I think it would be nice to retrieve some properties of this google autocomplete input field , like in this packcage https://github.com/abdj/autoform-google-places-input/

Option to prompt for location on page load

If option set to true, user is asked for location when map loads & marker is set and map is centred.

options geo and search have bugs

geolocation:true shows a button, but doesn't work when pressed (tested both Safari/Chrome)
searchBox: true (no search box is displayed)
I tested this with your admin package.

Not compatible with AutoForm v6.0

It looks like the package is - unfortunately - not compatible with AutoForm v6.0, at least dependecy wise.

$ meteor add yogiben:autoform-map
 => Errors while adding packages:

While selecting package versions:
error: Potentially incompatible change required to top-level dependency: aldeed:autoform 5.8.1, was 6.0.0.
Constraints on package "aldeed:autoform":
* aldeed:[email protected] <- yogiben:autoform-map 0.2.0

To allow potentially incompatible changes to top-level dependencies, you must pass --allow-incompatible-update on the
command line.

zoom only set with autolocate: true

The parameter zoom level is only used, when autolocate is set to true.

    'location.coordinates':
        type: String
        autoform:
            type: 'map'
            afFieldInput:
                type: 'map'
                searchBox: true
                defaultLat: 47.806
                defaultLng: 14.085
                zoom: 6
                height: '300px'
                # autolocate: true

Conflicts with dburles:google-maps

A great package for displaying maps is conflicting with the google maps api used in this package. Is is possible to use https://atmospherejs.com/dburles/google-maps instead?

Search box isn't appearing

I saw this was a recent addition? I have searchBox set to true in my autoform options but it isn't showing. Any idea?

Add Helper to display Map outside form

This package is awesome, thanks, I am hoping you would be able to make a helper to display the resulting map for use in a template. Thanks

Google Maps package

Thanks for making this package. It may be worth adding a quick note to the README that a google maps package is required. I used dburles:google-maps

Zoom is broken

Map always loads fully zoomed out. Changing zoom in options doesn't change anything.

I get the following error in the console:
Uncaught TypeError: Cannot read property 'zoom' of undefined autoform-map.coffee:70 (anonymous function)

An option to have [longitute,latitude] as I work with GeoJSON objects

Hello,

Could you add a way to have the coordinates in the opposite order (longitude,latitude) ?

Mainly due of http://docs.mongodb.org/manual/applications/geospatial-indexes/#spherical

Thank you

map not render

Hi ,

I have issue that a map is did not rendered at all , only google logo appear on left bottom side , but when i resize the browser window , the map suddenly appear ,

how could i fix this ?

Get current location doesn't work.

When trying to get current Location, the following error appears in the console:

Uncaught TypeError: _this.setMarker is not a function

[enhancement] address field

Is it somehow possible to additionally save the address from the search box?

With the current solution we only save lat,lng which is pretty much perfect when displaying a map, but when using different views (text vs map) the lat,lng attributes are kind of useless - an option to save both would be awesome.

My current workaroud would be to have a submit callback which reads the inputfield and saves the data to an additional field.

Regards,
lukas

Google maps options

Would be nice to implement the official Google Maps API options for complete control.

https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions

rendered function has no gmap parameter

If i set a function for the rendered option this function is like called 15 times and every time the map object is undefined.

location: {
        type: String,
        autoform: {
            type: 'map',
            afFieldInput: {
                defaultLat: "52.520645",
                defaultLng: "13.409779",
                geolocation: true,
                searchBox: true,
                autolocate: false,
                zoom:15,
                height: "400px",
                rendered: function (gmap) {
                    console.log("set current gmap");
                    console.log(gmap) ;
                    Session.set("currentGoogleMap", gmap);
                }
            }
        }
    },

i looked through your code and can't find an obvious error.

if typeof @data.atts.rendered == 'function'
        @data.atts.rendered @data.map

looks fine to me, but the map is undefined :/

OT: i would love to debug this myself, but i can't find the place to alter the code of your installed package.

Difference between declaration and real state

Hello!

I have that schema

@Places = new Mongo.Collection('Places')
PlacesSchema = new SimpleSchema
    title:
        type: String
        label: "Title"
        max: 250
        index: 1
    location:
        type: [Number] # lng, lat
        decimal: true
        label: 'Location'
        autoform:
            type: 'map'
            afFieldInput:
                searchBox: true
                height: '400px'
                zoom: 3

and on server startup

Meteor.startup ->
    Places._ensureIndex({'location': '2dsphere'});

After that my field looks like

location: Object
 type: "Point"
▼coordinates: Array[2]
 0: 145.29833681
 1: -40.75822243

Notice, Object, not Array.

As result it doesnt render map in form, only gray rectangle...

I try method rendered in afFieldInput

                rendered: (map) ->
                    console.log this
                    console.log map

and it shows my

Object {name: "location"}
undefined

I cant get the map object (.

How I can set coordinates or see map?

Cannot read property 'zoom' of undefined

Hi guys, I'm getting this error on browser console:

yogiben_autoform-map.js:179 Uncaught TypeError: Cannot read property 'zoom' of undefined

My setup:
https://github.com/filipenevola/easytennis/blob/master/collections/place.coffee#L26

It looks like a bug because even when I ommit 'zoom' config it fails.

Pressing enter when using the search box submits the form

First off, thank you so much for this slice of code. This may not be a bug report as much as a request for help.

I've defined this in a Schema as such

 location: {
    label: "Place a marker on your approximate location",
    type: String,
    autoform: {
      type: 'map',
      afFieldInput: {
        searchBox: true,
        autolocate: true,
        geolocation: true,
        defaultLat: 42.056,
        defaultLon: -87.674,
        zoom:15
      }
    }
  },

Calling it as such:
{{> afQuickField name="location" }}

However, if I try to use the search box (and press Enter), it submits that current form. I've tried to (unsuccessfully) curtail the behavior with this

'click .af-map-search-box ' :  function( event ) {
        event.preventDefault();
    }

Is there a better way to mitigate this?

Number field type to enable geospatial search

Hey there,

I'm so grateful about this package. Thanks a lot for making and sharing it.

However, I noticed that the location values are stored as strings in collection. I wonder if there's any specific reason to do so? I would be very happy to have the field stored in {"lng": Number, "lat": Number} in order to enable geospatial search in MongoDB. Wondering if there's any quick workaround?

I'm trying to understand your code (I'm pretty new to JS), and can submit a pull request if you would give me some code review. Please let me know if this works. Thanks a lot.

Hesen

Is there a way to reactively listen for changes on the marker position?

I have something like this in my template:

  {{#autoForm id="myForm" ... }}
    {{> afQuickField name="location" }}
    <div class="form-group">
      <label>Formatted Address</label>
      <input type="text" class="form-control" value="{{formattedAddress}}">
    </div>
  {{/autoForm}}

The location field get rendered as a map and works as it should, and the formatted address will show where the user put the marker on the map.

That's where I'm stuck. I'm not sure what I should be using from the formattedAddress helper. I tried using AutoForm.getFieldValue('location', 'myForm'); but it never recomputes the value.

Thanks for the help.

Centre (and zoom) map on successful location

After geolocation, map should be centred around point and zoomed to an appropriate level.

Change of language? Other settings?

Hi,

Is there an easy way to change the google map settings? Language is something I want to change.

SearchBox undefined

I am getting this error:
Exception from Tracker afterFlush function: debug.js:41 TypeError: Cannot read property 'SearchBox' of undefined at initTemplateAndGoogleMaps (autoform-map.coffee:82) at null.<anonymous> (autoform-map.coffee:112) at view.js:199 at Function.Template._withTemplateInstanceFunc (template.js:457) at view.js:197 at Object.Blaze._withCurrentView (view.js:538) at viewAutorun (view.js:196) at Tracker.Computation._compute (tracker.js:323) at new Tracker.Computation (tracker.js:211) at Object.Tracker.autorun (tracker.js:562)
The map displays fine, but the search box does not appear.

However if I reload the page that contains this template then there is no problem. So the problem only appears when I get to the page from another page on the own site.

Update to Autoform 6.2.0

Please support the latest autoform. I cant find any alternative map for autoform either.

Exception when saving location

I'm using the out-of-the-box sample code and when I select a location I get an exception and the location doesn't get saved.

It's here:

            google.maps.event.addListener searchBox, 'places_changed', =>
                location = searchBox.getPlaces()[0].geometry.location
                @data.setMarker @data.map, location # <<<<<<< 
                @data.map.setCenter location

> this
Nl {__e3_: Object, gm_bindings_: Object, gm_accessors_: Object, constructor: function, getPlaces: function…}
> this.data
undefined

Backtrace:

[Error] TypeError: undefined is not an object (evaluating '_this.data.marker.setMap')
    (anonymous function) (yogiben_autoform-map.js, line 194)
    dispatch (jquery.js, line 4698)
    handle (jquery.js, line 4366)
    reset ([native code], line 0)
    autoFormResetForm (aldeed_autoform.js, line 2127)
    autoFormActionCallback (aldeed_autoform.js, line 6494)
    wrappedCallbackForParsingServerErrors (aldeed_collection2.js, line 449)
    wrappedCallback (mongo.js, line 621)
    (anonymous function) (meteor.js, line 978)
    _maybeInvokeCallback (ddp.js, line 3860)
    dataVisible (ddp.js, line 3889)
    (anonymous function) ([native code], line 0)
    (anonymous function) (ddp.js, line 4718)
    forEach ([native code], line 0)
    forEach (underscore.js, line 156)
    _runAfterUpdateCallbacks (ddp.js, line 4717)
    _livedata_data (ddp.js, line 4707)
    onMessage (ddp.js, line 3721)
    (anonymous function) (ddp.js, line 2717)
    forEach ([native code], line 0)
    forEach (underscore.js, line 156)
    onmessage (ddp.js, line 2716)
    dispatchEvent (ddp.js, line 156)
    _dispatchMessage (ddp.js, line 1141)
    _didMessage (ddp.js, line 1199)
    onmessage (ddp.js, line 1346)

Schema.loc = new SimpleSchema({
  type: {
    type: String,
    allowedValues: ['Point']
  },
  coordinates: {
    type: [Number],
    decimal: true,
    minCount: 2,
    maxCount: 2
  }
});

Issue when using this package along with

Hi , Thanks for this package, it was working wonderfully well till I added dburles:google-maps package. Please check this link for details:
http://stackoverflow.com/questions/29886354/meteor-autoform-maps-google-maps-package-error

The map in the autoform does not render with TypeError. Could you please provide guidance?

Fill address

Hey there!

I wonder, could we fill address in input here? http://screencast.com/t/ekSpK3aMZ
I found same issue, but solution doesn't work for me.

Here is my schema if need: http://screencast.com/t/qQBJUi4z5